Question

Does anyone know how to accomplish a different layout based on the browser width, like these two sites?

http://sasquatchfestival.com/

http://css-tricks.com/

I’ve tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?

Sorry if my search skills are just failing, but I’m not really sure what to look up, the “similar questions” here don’t seem related, and even CSS-Tricks doesn’t have the info in an easy to find place.

Answer 1

You don’t need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.

For example:

@media screen and (max-width: 1280px) {
    ... selector(s) here ...
}

Will apply CSS only to screens that are at most 1280px wide.

See also:

• http://www.w3.org/TR/css3-mediaqueries/
• http://reference.sitepoint.com/css/mediaqueries