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

3436 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

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

1617 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;
     }
}

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

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by