1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 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).

3201 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
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

3201 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
organicbee says
1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 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 been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 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. ;)

1579 posts Chris Robinson
  • United States
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Has been a member for 5-6 years
  • Author had a File in an Envato Bundle
  • Referred between 500 and 999 users
  • Author had a Free File of the Month
+5 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;
     }
}

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer 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.

3201 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
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/
1579 posts Chris Robinson
  • United States
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Has been a member for 5-6 years
  • Author had a File in an Envato Bundle
  • Referred between 500 and 999 users
  • Author had a Free File of the Month
+5 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