Well considering some of my target audiences may have 4K resolutions, my
page will hit 4K approx.
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Saturday, November 22, 2014 9:56 PM
That's up to you. How wide do you want your page to get?
Tom Livingston <mailto:tom...@gmail.com>
Saturday, November 22, 2014 9:52 PM
Target / Context = Result
So if your max page width is 960 and your container is 650 then:
650/960=.677 (x100) so 67.7%
Tom Livingston <mailto:tom...@gmail.com>
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
Tim Arnold <mailto:tim.arn...@gmail.com>
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold <mailto:tim.arn...@gmail.com>
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the "Find Your Rate" form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
