Grow your CSS skills. Land your dream job.

Responsive Design – Sizes

  • # April 15, 2013 at 1:18 am

    Hey guys,
    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.

    Here’s example:

    http://jsfiddle.net/HSXDW/

    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.

    # April 15, 2013 at 8:33 am

    Weird….there something about math that is rattling around in my head but I can’t work it out.

    This should work…shouldn’t it?

    # April 15, 2013 at 8:35 am

    Could we put the % width items in a sub-wrap with a min-width of 600px.

    I think that would work…wouldn’t it?: http://codepen.io/anon/pen/wIrqa

    EDIT: Hmmm…then the min-widths are being ignored.

    # April 15, 2013 at 8:46 am

    Not sure if you can do this without MQ, tables (in css) or flexbox.

    # April 15, 2013 at 8:50 am

    Ah. I see @wolfcry has figured out the math issue I was having trouble with. B-)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".