There is a way of thinking with this min-width because everything after
changing from max-width has reversed. Instead when the view-port is
larger the block should become larger instead it's shrinking for mobile,
I'm doing something wrong !
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 10:24 PM
crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>
I see, you prefer min-width ?
Christopher
Yes. Mobile first with min-width. Recommended by many, and speaking
from experience it's much easier and less code than the other way around.
Using min-width MQs and percentage widths for structure elements
allows you to accommodate many more devices "automatically". Devices
of different sizes are accounted for because of the range of widths
between MQs.
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:46 PM
No.
As I stated in my reply. I'm using MIN-WIDTH media queries. They are
"active" when the viewport is AT LEAST as wide as the dimension stated
and remain in effect until - in this case the bg color - is changed
inside another MQ. Look at my source.
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 20, 2014 9:43 PM
Tom, as I shrink the viewport before I reach 320px the box is red,
shouldn't it wait until the viewport is at 320px ?
Christopher
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:39 PM
Look at this:
http://tomliv.com/css-d/mq/
I am using min-width. So the viewport needs to be *AT LEAST* as wide
as the dimension used. Can be wider, up to the next breakpoint (MQ).
Think mobile first...
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 20, 2014 9:13 PM
Chris code works better, although there remains a horizontal scroll
bar, maybe that is due to the fact I'm narrowing the browser window
too much, a little beyond the min-320px.
Tom your code when I scale the browser window there is a jump or gap.
What I mean is, the media querie is kicking in before the 320px is
reached.
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/
