CODEWITHSUNDEEP
htmlcsswidthresponsive-design
Ali Bassam
Ali Bassam

Reputation: 9959

Responsive design and min-width in pixels

I'm learning the new "Responsive design", and one of the first things I understood is that we should use percentages in defining whatever we could define, most importantly, the width.

Let's say I have 2 inline-block divs.

<div>
   //Left div
</div>
<div>
   //Right div
</div>

The first div, has a width:50%, the second div has a width:40%, everything seems good here, they are beside each other, and when you resize the browser they will get smaller.

So that we stop them from resizing too much (where things become unreadable), we should use min-width in pixels.

If I set min-width:200px; for the first div, and min-width:100px; for the second div, and when I resize the window until the second div becomes under the first div, everything seems good.

But if I resize MORE and MORE, the width will stay fixed because the browser size is less than the min-width of those divs, which will lead to the creation of the scrollbar.

I am resizing so I can test how things should look on smaller resolutions (phones, tablets), am I missing something here? Is this where everything stops and the role of media queries begin? or there's more that I can do to fix this?

JSFIDDLE

Upvotes: 1

Views: 3420

Answers (2)

Ketan
Ketan

Reputation: 56

What you are looking for is known as responsive layout.

Here are couple of reference links that might help you to achieve responsive layout.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

Upvotes: 1

niaccurshi
niaccurshi

Reputation: 1295

Is this where everything stops and the role of media queries begin?

Essentially, yes. Media Queries are what you need to use when you feel that your design can no longer squeeze in to the space you're providing it. At the point you're talking about, roughly 300px window size (plus margins?) you would want to use a media query to change the way you display those divs, perhaps so that they were 100% of the width of the viewport, and thus stacked one on top of another rather than side by side. This would effectively over-ride the min-width in practical terms for your example.

What you want to achieve is a design that works regardless of the viewport size, and the moment that making the viewport too small, or too big, means that the layout is hard for the user to use or read, then media queries provide the best way right now to "reset" the layout to re-inject usability for that new set of dimensions.

I would say you don't necessarily have to worry about setting a min-width; though there's a strong argument for using them to take in to consideration internet explorer, as it won't deal with media queries in it's older versions.

Upvotes: 2

Related Questions