I know if you give an image {max-width:100%} when the viewport (browser
window) scales down the image will get smaller (why the reference to
Steve Martin ?)
When I said scale the width of the viewport, I meant the <div>/container
will fits the exact with of the viewport (browser window) which I don't
want. It could be I'm misunderstanding at this point, soon to understand :-)
Christopher
Tim Arnold <mailto:tim.arn...@gmail.com>
Saturday, November 22, 2014 9:21 PM
Percentage values scale the width of the viewport unlike pixel
values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the
container the size of the image ?
Christopher
Christopher,
If you just give the image "max-width: 100%" it will only start
"getting small" (thank you, Steve Martin) when its container forces it
to. What do you mean by "scale the width of the viewport?" Percentage
widths on containers have no affect on the width of the viewport, they
scale proportionally to the viewport.
Tim
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
Crest Christopher <mailto:crestchristop...@gmail.com>
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Saturday, November 22, 2014 7:50 PM
This will be handled by the min-width MQs, as mentioned before. Base
styles for small screens like iPhone. Then, for example, the next MQ
at 480 for landscape iPhone. The gap between base and 480 will take
care of the different width phones.
______________________________________________________________________
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/
