How to make your website adjust to different screen sizes

Written by michelle norton
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make your website adjust to different screen sizes
(Christopher Robbins/Photodisc/Getty Images)

Screen resolution presents a problem for web developers. Each computer set-up 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 resize as the browser window changes size. This will change with the resolution of the viewing computer or with resizing the browser window itself.

Skill level:

Things you need

  • Text editor

Show MoreHide


  1. 1

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

  2. 2

    Locate the HEAD tags in your web page by looking for the <head> and </head> HTML tags near the top of your web page.

  3. 3

    Add the CSS tag selectors just above the </head> tag 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: <style type="text/css">body {} #container{}</style>

  4. 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 per cent width. If you want the container to have a margin that shows the background, then you could give it an 80 per cent width. Using the example above, the code would be "body {width: 100%;} #container{width: 80%;}."

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.