How to Make My Website Resize for Any Resolution

By Brandy Alexander

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.

Step 1

Launch your text editor and create a new page.

Step 2

Type “body” and enter opening and closing curly brackets. For example:body { }The “body” rule controls the content of your page.

Step 3

Enter “width:” between the brackets. Follow this with “100%” and a semicolon after this entry. To illustrate:body { width: 100%; }This setting manages the behavior of your website so that it adjusts with various monitor resolutions.

Step 4

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 5

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 6

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