Responsive design is known to all. To achieve responsiveness we generally use media queries. But I feel media queries are some kind of CSS Hack. It is really annoying when I need to work with it. Sometime it makes my CSS totally messy that I don’t want to see it again. If anyone who is in my situation I have a good news for those. It is Element Query.

In Element Query we define our responsive elements in more expressive way like below

.widget-name {
    padding: 25px;
.widget-name[max-width="200px"] {
    padding: 0;
.widget-name[min-width="500px"] {
    padding: 55px;

/* responsive images */
.responsive-image img {
    width: 100%;

.responsive-image[max-width^='400px'] img {
    content: url(demo/image-400px.jpg);

.responsive-image[max-width^='1000px'] img {
    content: url(demo/image-1000px.jpg);

.responsive-image[min-width='1000px'] img {
    content: url(demo/image-full.jpg);

There are many Element query repository in github. I used the below and found really cool

© 2016. All Rights Reserved.

Proudly published with Ghost