How To Set A Minimum Page Size

When looking at websites in class, I noticed there was a lot of criticism regarding the text and images getting ‘squished’ when the browser was re-sized to a less-than-desirable width.  To combat this, I took a key from some responsive web design enthusiasts.

I looked up how to make a page not re-size it’s content, and stumbled upon the min-width property.  It sets the minimum width of an element to the specified width.  If the browser is re-sized, the user doesn’t get squished text, but rather a horizontal scroll bar.

For example, let’s say that you wanted to write a content section your page, with the id content, and in the CSS make it no larger 500px.  This will allow the browser to only set this div or section to a minimum of 500px.


An important thing to not is that this minimum width does NOT include any padding or margins you have on your content. If you had a padding of 20px on the left, and a margin of 50, the new minimum would be 570px for all of your content.

This can be used to make sure your page keeps its desired look no matter what the size of the users browser window is.

-Zack Hall

~ by zjh7cdm on February 18, 2013.

One Response to “How To Set A Minimum Page Size”

  1. I feel like this was the best post of the week. The topic was obviously very strong because many people have been struggling with it for a few weeks, and really didn’t understand how to fix it. The post was very strong because you also explained how setting the width doesn’t effect padding or margins, and explained where a good place to set this at would be. You gave a very and clear explanation of how to fix the problem. – Aisha H

Comments are closed.

%d bloggers like this: