If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well, into an extremely narrow container/div that looks horrible ?

Christopher



Tom Livingston <mailto:tom...@gmail.com>
Sunday, November 23, 2014 12:14 PM
Normally what I do is have my page width be 100% of the viewport until I reach my "desktop" breakpoint. At that point my page max-width will be in effect. Typically we max our page content at 960. So it's at this point I start working with percentages based on a max of 960.

Obviously, use your own parameters for your page.


Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, November 23, 2014 11:58 AM
Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7%

How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths.

Christopher

Tom Livingston <mailto:tom...@gmail.com>
Sunday, November 23, 2014 11:42 AM
Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible.
Crest Christopher <mailto:crestchristop...@gmail.com>
Sunday, November 23, 2014 11:29 AM
Tom & Tim - I forgot about the mobile tools in Chrome, they are pretty good, I wonder if you can add devices, my phone is not listed.

Christopher

Tim Arnold <mailto:tim.arn...@gmail.com>
Sunday, November 23, 2014 11:18 AM

On Nov 23, 2014 11:01 AM, "Tom Livingston" <tom...@gmail.com <mailto:tom...@gmail.com>> wrote:
>
> While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox.

The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way.

Tim

______________________________________________________________________
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/

Reply via email to