Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Web site layout that changes with different widths?

Web site layout that changes with different widths?

Problem

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.

Problem courtesy of: miahelf

Solution

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
Solution courtesy of: vjvis

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Web site layout that changes with different widths?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×