PDA

View Full Version : Format page size according to screen resolution


humpfry
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!

gentleone
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.

humpfry
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.

Corrosive
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.

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

edbr
03-06-2012, 06:46 AM
http://www.javascriptkit.com/howto/newtech3.shtml

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

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

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

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

Corrosive
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