Adjust Your Website to Fit All Resolutions

When designing a website, one of the most important things to keep in mind is to ensure that your page appears correctly across screens and devices of all sizes. This can be done by inserting a line of code into your page that defines a page's relative width or by providing minimum and maximum resolution values. This quick article will give you tips on how to ensure that your website appears properly on screens of all sizes.

Adjust Your Website to Fit All Screens

Defining a page's relative width is the recommended method when it comes to webpage design due to the page's ability to adjust to screens of any size. By defining the width in percentage as opposed to unit number, you build in a certain amount of flexibility for each piece of the page, allowing it to grow or shrink based on a viewer's screen specs.

Definition of a website's relative width is done via body tags. This tag can be adapted if you use a div # body:

body{width:100%;}

In this example, the code dictates that your website's page will take 100% of the window, regardless of the viewing screen's size. If you'd like your page to appear slightly smaller, we recommend setting your width to no less than 80%, or you risk that your content will appear too small on-screen. If you define a smaller width, you can focus your screen using margin: auto.

Minimum or Maximum Width Property

The minimum or maximum width property can also be used while adjusting the website to fit all types of resolution. It is important to note, however, that a minimum width is not supported in Internet Explorer, and that setting a maximum width may result in distorted presentation if a smaller page doesn't fit a larger screen.

Here's an example of a website showing a page width of 90%, centered, with a minimum width of 600 pixels and a maximum width of 2000 pixels:

body{width:90%;margin:auto;min-width:600px;max-width:2000px}

Image: © Austin Distel - Unsplasom