Adjust webpage to fit all screen 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 quick article will give you tips on how to ensure that your website appears properly on screens of all sizes.
How to adjust your website to fit all screens?
Defining a page's relative width is the recommended method for 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 a certain amount of flexibility for each page piece, 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.
How to know the minimum or maximum width property?
The minimum or maximum width property can also be used while adjusting the website to fit all resolutions. However, it is important to note that Internet Explorer does not support a minimum width. Setting a maximum width may result in a 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}