Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
In this article I share the steps for
- registering a
- displaying this widget area below the footer and hiding it initially using CSS
- loading EQCSS and writing element query such that a Genesis eNews Extended widget placed in our widget area will fly in from bottom left and be visible when users scroll 150px from top until 90% from top
- adding CSS to make the flyout work only for screen sizes 500px and above.
based on their demo.
Upload EQCSS.min.js to your child theme's
js directory (create if not existing).
Install and activate Genesis eNews Extended plugin.
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.