1950 posts Do the Needful
  • Weekly Top Seller
  • Author Level 8
  • Elite Author
  • 5 Years of Membership
+12 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).

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 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

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says
1950 posts Do the Needful
  • Weekly Top Seller
  • Author Level 8
  • Elite Author
  • 5 Years of Membership
+12 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
  • Weekly Top Seller
  • Author Level 8
  • Elite Author
  • 5 Years of Membership
+12 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. ;)

1680 posts Chris Robinson
  • Elite Author
  • Author Level 10
  • 7 Years of Membership
  • United States
+13 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;
     }
}

4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 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.

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 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/
1680 posts Chris Robinson
  • Elite Author
  • Author Level 10
  • 7 Years of Membership
  • United States
+13 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