Responsive Design – Sizes
# April 15, 2013 at 1:18 am
I have a questions about sizes in responsive design, hope you can help me a little bit.
So lets say we have pretty much basic template. We have our 100% width logotype, than goes navigation, content and sidebar with float:left attribute. Navigation has 20% width, content 60% and sidebar 20%.
So I want that my .content had min-width: 400px; and my side blocks had min-width: 100px ;
But I don’t want that my .content block moved down when it hit 400px width. I want that after .content hit 400px it stays still, but side blocks continue to resize untill it have 100px width.
Thank you.# April 15, 2013 at 7:48 am
The fiddle is doing exactly what you want. The boxes have min-width and once that is reached…something has to move.
As the green sidebar can no longer fit in a box that is less than 600px wide it has to drop down.
What would you like to have happen when the viewport is under 600px?# April 15, 2013 at 8:08 am
His problem exists between 667px and 600px…
Dade, the numbers just don’t add up. 100px of a 600px width (the smallest you want the three columns total) is 16.67% – not 20%. So you could adjust the flanking column width percentage, or change it at 667px with a media query, but why? Without the min-width on .content, it would drop to 360px – so you’re dealing with a mess for 40px of content width.
You must be logged in to reply to this topic.