View Full Version : Format page size according to screen resolution

03-05-2012, 03:44 PM
I am having a bit of a problem. When i view my page on my nice 1080p laptop screen the entire site is visible yet when i view my page on an older crt monitor at 1024x768 or something similar the page takes up the entire screen space. How would i code the site to appear the same size on every monitor regardless of resolution? Thank You!

03-05-2012, 04:48 PM
Instead of using pixels use percentages. That's all! But the culprit with this method is that your website is gonna look dull on a super wide screen monitor like an iMac or TV.
To get around this you have 2 options:
1. set a max-width of lets say 1600px to the container/wrapper div or on the body tag if you don't use a wrapper div.
2. take the responsive web design approach which use CSS media queries so that you can serve different CSS to handle the different viewport sizes (screen resolutions). Even up to the (smart)phones if you want.

The second method is still a very young technique which does not work in IE8 and below, but there are javascript polyfills to solve that problem. There are also responsive frameworks to get you started. Google for responsive web design and you'll find heaps of information.

03-05-2012, 08:08 PM
i have the width set to 980 pixels right now and on my laptop screen which is 1920x1080p the site does not take up much of the width of the screen and vertically i can see just about the entire page for the most part. Viewing the page on an old crt monitor at 1024x768 the entire width of the screen is taken up and vertically most of the site isnt visible without scrolling. Using percentages how would i keep the page looking as is on higher resolution monitors yet smaller on lower resolution monitors? i just dont understand how that could be possible but i am sure a zillion people know what i am talking about.

03-06-2012, 06:17 AM
I think that gentleone has really given you the best answers here. Using % widths but setting a max-width in the CSS is probably a good way to go.

03-06-2012, 06:39 AM
you can determine screen size but you cant know if the user has maximised windows or not

03-06-2012, 06:46 AM

03-07-2012, 01:17 PM
Option #3, keep it like it is.

95% (?) of web sites behave this way.

03-12-2012, 03:21 PM
if anyone wants to look at the site, the url is http://www.rockhillauto.com
Thank you!

03-19-2012, 02:26 PM
how would i do those percentages without dreamweaver? what would the css code look like in notepad?

03-19-2012, 02:48 PM
Well, for example your #container code might look like;

#container {
width: 100%;
max-width: 980px; /*beware, doesn't work in IE6*/
border: 1px solid #417378;
background: white;
margin: 2em auto;

Read JCs tutorial on mobile devices as I think he explains it very well; http://www.dreamweaverclub.com/mobile-friendly.php