How to Make Your Website Adjust to Different Screen Sizes

By Michelle Norton

Screen resolution presents a problem for web developers. Each computer setup is different and resolution is not a parameter that can be controlled by a web page. The solution, however, is to use CSS or cascading style sheets to control the size of your page depending on the size of the browser window. The key is to use percentages in the width property of your CSS. By using a percentage amount, the content of the website will re-size as the browser window changes size. This will change with the resolution of the viewing computer or with resizing the browser window itself.

Things You'll Need

  • Text editor

Step 1

Click on "File," then "Open" to open your web page in a text editor. Choose your web page from the menu.

Step 2

Locate the HEAD tags in your web page by looking for the

andHTML tags near the top of your web page.

Step 3

Add the CSS tag selectors just above thetag inside a STYLE tag. This can be the "Body" tag selector or a container DIV ID or Class if you want the content separate from the background of the web site. For example: "body {}" or "#container{}." You can add both to control the sizes for both elements. Inside the STYLE tag both items would look like this:

Step 4

Add the width property with a percentage amount. For example, if you want the body to cover the entire window area, you would give it a 100 percent width. If you want the container to have a margin that shows the background, then you could give it an 80 percent width. Using the example above, the code would be "body {width: 100%;} #container{width: 80%;}."