From http://elementqueries.com/:
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.
EQCSS is a JavaScript plugin that lets you write element queries inside CSS today.
In this article I share the steps for
- registering a
bottom-flyoutwidget area - 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.
Step 1
Upload EQCSS.min.js to your child theme's js directory (create if not existing).
Step 2
Install and activate Genesis eNews Extended plugin.
Step 3
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.
Would it be possible to have a “X” cross in the top right hand corner when it is displayed (only) on desktop view so that people can remove/close it, if they want to?
Second thought: What happens when the user presses submit, is there a message that appears to acknowledge their input? Finally when a person is subscribed is there a way to prevent the pop-in from appearing since it is no longer valid to ask them to subscribe?