[Pro] Responsive break points

I have set a new media width: Large screens at 1200px but it’s not w working as expected. Is this because my default width is still at 960px and all other device wide he should be smaller than the default?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep - exactly.

If you plan Large screens, your page-width should be taller as the breakpoint. So you need to start (default) by let’s say 1440px to make a breakpoint at 1200px working.

Just a side note:

In my responsive world, fixed pixel values for items are not existing anymore - relative values (%) rule.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you very much Thomas. Very much appreciated.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I did a small experiment.

On a 960 “width” page, I set breakpoints at 1440px, 1024px 768px, and
480px. Then I set five inline divs-- one for each breakpoint-- then set the
background colors to change for each breakpoint. The result was the
“default” div was colored only at widths larger than 1440px-- which was the
largest setting. All the other breakpoints worked as expected.

So I think the logic of it is, yes-- the default breakpoint should be the
widest your page will be set to. Then, plan downwards in terms of width.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Targeting a page taller than “default” requires the

@media screen and (min-width: 1440px) 
{ do something; } 

dialogue rather than the “max-width” which is standard so far. So only available by hand-hack (old school) - theoretically :-).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Thomas,

that might be a good workaround for me, as the whole Freeway site is already default at 960px.

Otherwise it looks like I would need to change the default from 960 to 1200, then add in a new 960 media width and make it all back to 960 again. And then onto the smaller widths.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well - yes. However it’s so hard to recommend things while a constructional situation is unclear - and what you’re definitely after.

960px is perfectly fine for all desktop devices and even still fine for Tablet-Landscape. The first time to think about re-arranging is at Tablet-Portrait (768px).

So I’m honestly not really sure why a breakpoint way above is necessary.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So I’m honestly not really sure why a breakpoint way above is necessary.

1440px is generally, functionally, laptop screen width. If you wish to make
some distinction between desktop users who use their browsers at wider
widths and portable users at their widest widths, I suppose. If you are
targeting widths.

Breakpoints-- though-- are also the points at which your design will
“break” so not just device targets. A good inflow layout should be fluid
and flexible, but may need help at odd widths. I did this sample on html
blockquotes a while ago-- I will likely redo to fit my site design, but it
has breakpoints at 1800 and 1200px…
http://cssway.thebigerns.com/workbench/blockquote/

Both are targeting desktop users but with different browser habits, maybe.
I find this myself with my 27-in iMac, always adjusting my browser to width
to fit my work habits.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks chaps. I (and my client) are finding that the 960 site as it is is looking a bit lost on the wide screens of today.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options