1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

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).

3231 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says

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

3231 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

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.

1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

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

http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/

I think that’ll keep me busy for a while. ;)

1594 posts Chris Robinson
  • Located in United States
  • Has sold $500,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
contempoinc says

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

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Quick example:


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

4327 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says

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

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

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.

3231 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says


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

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

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/
1594 posts Chris Robinson
  • Located in United States
  • Has sold $500,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
contempoinc says


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

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

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/ ;)

by
by
by
by
by
by