Some examples of using Element Queries to build a responsive component
HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 1 commit ahead of lourfield:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
.gitignore
README.md
index.html
index2.html
index3.html

README.md

Envato Tuts+ Tutorial: How to Build a Responsive UI Component Using Element Queries

Instructor: Louie R

In this tutorial we’ll continue our discussion about element queries, turning our hand to building a reusable responsive component.

To recap, element queries enable us to mould an element based on its container’s characteristics; the width, height and so on. But it’s worth pointing out that element queries are a long way off becoming a CSS standard, and we’ll probably have to wait for a couple of years before that happens.

So, for now, we will have to resort to a JavaScript library to emulate similar functionality, such as EQCSS.

View the demo