Re: using @media queries

[iknowdavehouse]

Yeah – if you think the style sheet just reads from top to bottom… so the media queries inherit what’s above it. So all you need to do is address the parts that need to change.

For example if you have 3 content boxes in a row on the desktop site

and .content has a float: left; width: 33%; in the main body of the CSS

For the media query you just need to address what needs to be addressed – so to stack these on top of each other at 500px you would say

@media only screen and (max-width: 500px) {

.content {clear: left; width: 100%;}

}

Then you will realise that stacking them will cause the need to add extra code too… like a margin-top to separate them vertically for example. You do not need to address what isn’t changing – font color etc (unless you want to)

So this theory works from the widest media query to the smallest, they will inherit the one above so you don’t need to repeat this action on .content for a media query of 350px because it would have inherited from the 500px break point.