How to Make My Website Fit Any Resolution

By Michelle Norton

Screen resolution vexes many Web designers because it varies from user to user and computer to computer. There are two ways to deal with the issue of screen resolutions and allow your Web page to fit any resolution. First of all, using Cascading Style Sheets or CSS, you can set the width of the Web page to change with the resolution by setting percentages for the width in your Web page’s CSS file.

Things You'll Need

  • Text editor

Step 1

Open your Web page’s HTML and CSS file in a text editor.

Step 2

Look for the

tag in the HTML file. This denotes the beginning of the visible area of the website. Create a
tag underneath the.

Step 3

Give the

tag an ID. For example:

Step 4

Look for the

tag at the end of the HTML document. Place the DIV end tag before the
. So it would look like the following:

Step 5

Save your HTML file.

Step 6

Create CSS elements in your CSS file for the body tag and the page ID. Set the margins and padding of the body tag to zero. This will make sure the visible area covers the browser window. For example:body {margin: 0; padding: 0;} #page {}

Step 7

Set your page width in the page ID using percentages. The percentage will allow the page to change to the resolution the user is viewing the website. For example: #page {width: 100%;}

Step 8

Save your CSS file.

Tips & Warnings

References & Resources