Website Content Resolution and CSS

By | May 27, 2013

How to adjust content to the resolution of the visitor? What resolution should I choose?

Simply apply a relative width, which changes depending on the size of the Window and the screen of the visitor page. The most common is to use the body tag. If you use a #div or body tag to adjust the size of the page, use the below CSS code:

body {width: 100%;}

With the above code you page will take 100% of the Window, regardless of its size. Obviously  you can set the width you want such as 90%, 80%, etc… If you define a smaller width, it can focus with “margin auto”.

Note: You must define a width in %, not other units because % is a percentage of the width of the Window unlike to the row heights which size are predefined. You do not have to remember this, but if you are confused then do not mind, just make sure you follow these directions.

Facts

It is important that your page is not smaller than a certain size, you can use the min-width property (which does not work in IE browser). You can also use max-width property to set the maximum size. Although, this practice is not recommended because it is not nice to have a page which is smaller than the Window.

Example: A page with 80% width, centred alignment, a minimum width of 500 pixels and a maximum width of 1000 pixels:

body {width: 80%; margin: auto; min-width: 500px; max-width: 1000px}

Leave a Reply

Your email address will not be published. Required fields are marked *