Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > How to Adjust Your Page For Different Screen Resolutions
Mottie (SuperAdmin) 12/16/2008 9:34 AM EST : How to Adjust Your Page For Different Screen Resoluti...
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

How to Adjust Your Page For Different Screen Resolutions

GuildPortal admin site link to original post

Images

I started out with a standard background image and resized it to fit the following screen widths: 800, 1024, 1280 and 1600. Then uploaded them to photobucket.

CSS

Measure the inside width of each background - I recommend using MeasureIt (Firefox only addon). Now make a separate CSS file for each resolution and use the measured inside width as the "PageWrapper" width... the css only needs the size of the wrapper and left & right content zones... Make sure the width is followed by an "!important".

I left these as separate CSS files in case you want to use different box borders for smaller sizes. Here is what each file looks like:

Upload these CSS files to your site through the file manager.

*Note: "max-width" in the CSS does not work with IE6, so read the comments below as to the additional variables required to make it work.
blue-800.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-800.jpg) top center;}
.PageWrapper {width:555px !important;}
.LeftContentZone {width:175px !important;}
.RightContentZone {width:175px !important;}
.CenterContentZone {max-width:180px; width:auto !important; width:180px;}
blue-1024.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1024.jpg) top center;}
.PageWrapper {width:860px !important;}
.LeftContentZone {width:200px !important;}
.RightContentZone {width:200px !important;}
.CenterContentZone {max-width:440px; width:auto !important; width:440px;}
blue-1280.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1280.jpg) top center;}
.PageWrapper {width:975px !important;}
.LeftContentZone {width:225px !important;}
.RightContentZone {width:225px !important;}
.CenterContentZone {max-width:500px; width:auto !important; width:500px;}
blue-1600.css
body {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/blue-1600.jpg) top center;}
.PageWrapper {width:1360px !important;}
.LeftContentZone {width:250px !important;}
.RightContentZone {width:250px !important;}
.CenterContentZone {max-width:825px; width:auto !important; width:825px;}

The Code

Add this script to your banner area or footer
<script type="text/javascript">
$(document).ready(function(){
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 if (!$('#screencss').length) $('body').append('<div id="screencss"></div>');
 var pageWidth = $(window).width();
 var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
 if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
 if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
 if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}
</script>
  • If you are considering adding css for smaller screens, like an iphone, then you can make more files... in the example below I started with the sizeSelected variable at "blue-320.css" and the first (pageWidth > 510) line, like this:

     var sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-320.css";
     if (pageWidth > 510) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-640.css";
     if (pageWidth > 580) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-800.css";
     if (pageWidth > 900) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1024.css";
     if (pageWidth > 1010) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1280.css";
     if (pageWidth > 1420) sizeSelected = "http://www.axiomfiles.com/Files/258012/blue-1600.css";

  • Adjust the file location to where you uploaded the separate CSS files
  • Adjust the pageWidth size (in red) to your liking. There is an additional amount added so the outside borders in the background are visible. Once the width drops below that, the next size is chosen.
  • Since IE6 doesn't like the max-width CSS variable, there is a work-around to get it to work, but it requires you to enter the width twice.
    .CenterContentZone {max-width:825px; width:auto !important; width:825px;}
    In the example above, max-width is set to 825px and width at the end is set to that as well. Also, these three variables must stay in their present order.
Edit (3/12/2009): Added the extra CSS required to make the max-width variable work with IE.
Edit (9/25/2009): Added comment about using MeasureIt addon for Firefox
Edit (12/21/2009): Updated code to automatically adjust while resizing the browser window.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%