Resizing site dimensions based on screen size

Envato Authors Theme Authors
1

I’ve seen websites that resize depending on the user’s screen size all over the place (most notably the Tumblr home page) but I’m not quite sure how it’s done.

I could probably spend time Googleing it but thought some of you high speed Envato people could clue me in better than a random blog post (I would like to implement this in a landing page I’m building).

2
JamiGibbs said

I’ve seen websites that resize depending on the user’s screen size all over the place (most notably the Tumblr home page) but I’m not quite sure how it’s done.

I could probably spend time Googleing it but thought some of you high speed Envato people could clue me in better than a random blog post (I would like to implement this in a landing page I’m building).

They are done with css gird systems I dont know of any freely or commercially available atm that will work with large resolutions(EDIT:see post below) something like http://www.rga.com/ is a good example of its use, has to deal with em % min/max-width and may use css3 media queries

3

heres a good list of gird systems http://www.tripwiremagazine.com/2009/06/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html

4

Thanks a lot! I’m fairly familiar with grid systems (particularly the 960 grid system) but I’m just not sure how the user’s screen size or browser size is dynamically regenerating the website dimensions.

5

Thanks to OrganicBee, I came across this list of resources about elastic layouts:

I think that’ll keep me busy for a while. :wink:

6

I’d recommend using CSS3 media queries, take a look at the article below

Quick example:


@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}
7
contempoinc said

I’d recommend using CSS3 media queries, take a look at the article below

Quick example:


@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

What about IE7-8? I prefer jQuery for this. http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/ Or CSS3 media queries with jQuery fallback for old browsers. <-- more work.

8
Ivor said
contempoinc said

I’d recommend using CSS3 media queries, take a look at the article below

Quick example:


@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

What about IE7-8? I prefer jQuery for this. http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/ Or CSS3 media queries with jQuery fallback for old browsers. <-- more work.

This is a good post with some tips to handle it all http://www.webdesignerwall.com/tutorials/css3-media-queries/
9
Ivor said
contempoinc said

I’d recommend using CSS3 media queries, take a look at the article below

Quick example:


@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

What about IE7-8? I prefer jQuery for this. http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/ Or CSS3 media queries with jQuery fallback for old browsers. <-- more work.

http://protofunc.com/scripts/jquery/mediaqueries/ :wink: