Remove CSS Attribute When Under Certain Resolution

I have a few sections and the most popular one stands out [![enter image description here][1]][1]

Solution 1:

Wrap your style for .popular in a media query. like this:

@media screen and (min-width: 768px){
    .popular {
        border:2px solid green;
        /*rest of the styles*/
    }
}

This way your popular class will only be applied if the screen size is more than 768px.

Solution 2:

You could use media queries to accomplish this. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

You would need to determine at what resolution you would want. Then set you css for what you want.

Share