I sell games to a lot of people with BIG monitors and desktop PCs. But then, a lot of people also play, and surf on smaller-screen laptops. Basically it is about time I stopped serving the exact same web page to everyone. So as of today, positech.co.uk is a little cleverer than before!
check it out, and try resizing the window if you have a big screen:
http://www.positech.co.uk/index.html
The bulk of the site is the same, but depending on screen width, you get 3,4 or 5 little images linking to other games under the big slider thing. I think this makes good use of 1920 res monitors without sticking horizontal scrollbars (ugh) on smaller browser windows. It’s easy to do as well…
You just need to use some CSS, and a few <div> sections here and there. if you name a <div>, you can adjust it’s width based on the browser window inside the css like this:
@media screen and (min-width: 1400px) and (max-width: 1648px)
{
.gamesection {width: 1316px;}
}
That makes the gamesection div 1316px wide if the screen size is between those 2 values.
I can then hide/show the ‘optional’ boxes with the extra images the same way, using named divs in the html:
@media screen and (min-width: 1400px) and (max-width: 1648px)
{
#optionalbox { display: block; }
#optionalbox2 { display: none; } /*hide 5th game box if screen is too short*/
}
I thought it was cool anyway :D