Set the Window and Block's Width

Current width of this element is:

Current width of the window is:

Find your Resolution

Here are a few important points to consider from a technical perspective:

• The amount of background will be determined by the screen resolution of the users’ computer or mobile device and will vary for each person. 
• The background will extend to the size of the window.
• In this example the color bars at the top are for reference in order to see how wide your screen is along with the numbers that detail the specific width dimensions.
• By selecting a width that is less than the screen width in the text box above and clicking the Set Width to Size button, the white window will adjust to display that width to give you a visual of what you will see at that size compared to your screen.
• According to January 2018 statistics, about 92% of users have a resolution greater than 1024x768. At one point, all web design was design for 1024x768 as a standard since majority of displays used that resolution and the most users were guaranteed a good experience by designing and developing websites to that resolution.
• The trend should continue to see more users with higher resolutions.
• With the advent of mobile devices on the web, resolutions that will view a site have become much more diverse. Responsive Design is used to address the great diversity in resolutions and give a good experiences on all devices.

Links to additional resources to find out more about screen and device resolutions:

• http://screenresolution.org/
• http://www.w3schools.com/browsers/browsers_display.asp
• http://www.w3counter.com/globalstats.php
• http://en.wikipedia.org/wiki/Display_resolution
• http://marketshare.hitslink.com/report.aspx?qprid=17