How to Make My Website Resize for Any Resolution

The resolution on a computer monitor is the quantity of pixels per inch that it takes to fill the screen. As you create your websites, you know that your viewers all have different size resolutions, which makes the design aspect difficult. If you assign a size that is too big, viewers have to scroll to see all of your content, and too small of a setting builds a lot of extra space around your page. To solve this problem, use Cascading Style Sheets (CSS) to make your website fit with any resolution.

...
Make sure your website looks good on any monitor resolution.

Step

Launch your text editor and create a new page.

Step

Type “body” and enter opening and closing curly brackets. For example:

Step

body { }

Step

The “body” rule controls the content of your page.

Step

Enter “width:” between the brackets. Follow this with “100%” and a semicolon after this entry. To illustrate:

Step

body { width: 100%; }

Step

This setting manages the behavior of your website so that it adjusts with various monitor resolutions.

Step

Save your document with a “.CSS” ending (extension). Place this file on your web host in the same folder where you keep your other website files and make a note of the URL address location (for example, “http://www.yourwebsite.com/file.css”).

Step

Open the pages of your website. Place your cursor between the “

” tags and type the code that links your CSS file to your page:

Step

Step

Save your files and place them back on your web host to publish the changes.