Adjust webpage to fit all screen resolutions

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 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.

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 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}
Do you need more help adjusting your screen? Check out our forum!
Subject Replies
Laptop screen blank when switched on 391
Acer laptop wont start up ! 50
Blue screen while trying to install XP 37
External monitor to broken laptop screen 25
Green screen in YouTube 6
iPod has white screen of death 129
3 beeps no display on monitor 14
monitor keeps going in power save mode 9
Monitor, mouse, and keyboard don't work 18
My computer wont go past the acer screen 8

Web