Css-Tricks like fluid layout.

[Piny2u]

Hi guys,

I really did my best to search all over the web some pointers about how to make such a layout. I’m not sure but some of you may never resized the browser window (with css-tricks.com page opened) down to 200px and up to 1900px.

If you didn’t, do it now :) You’ll be amazed (atleast I was, and I still am).

I would be very grateful if you could give me some tips or indications from where to start understanding how this layout has been made. I found several other examples beside this website. Unfortunately I couldn’t understand how are they done and how all the elements rezise and change, going to minimal when the space is tight (like smartphones displays).

Thank you guys!

[Ben_Derby]

Hey,

The way that is done is by using media queries.

Here are a few links to get you started.

https://css-tricks.com/lessons-with-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

If you download twitter’s bootstrap 2.0 the basic templates have the media queries built in and you could play around with them there.

http://twitter.github.com/bootstrap/

:D

[Piny2u]

Ben,

You’re a God :) Thank you so much!

[Ben_Derby]

No problem good luck.

[Author]

Posts