How to Make My Website Fit Any Resolution

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.

Woman working at home with laptop computer
Help your website readers view your page.
credit: Jupiterimages/Brand X Pictures/Getty Images

Step

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

Step

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

Give the

tag an ID. For example:
.

Step

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

Step

Save your HTML file.

Step

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

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:

Step

#page {width: 100%;}

Step

Save your CSS file.