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:


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



8 Responses to “Little bit of CSS / web design stuff…”

  1. Ryan says:

    Awesome. I’ve always been wondering how to do that. Seems it only became a standard about a year ago. It’s a feature that has been sorely needed for a long time.

  2. Long says:

    That is indeed very neat. Another option is to have accordion style panels (or just collapsible ones) and give users the options to choose the panels to be displayed at any given time. You can then use cookies / server-side storage to preserve such states.

    I have used ExtJS for that and found it to be adequate. There’re a lot other JS engines out there with the same abilities, too.

  3. Breezey says:

    Hi Cliff,

    Not sure if this still needs some work… :)

    I got either a blank box or it didn’t balance itself right.

    I can’t post the screen shot? Do you want me to email it ?

    Looks kewl still though

  4. Terrific submit. I’d been verifying regularly this particular site and I am satisfied! Extremely helpful data specially the ultimate sections :) I attend to this sort of data considerably. I became in search of this particular specific info for the quite a while. Cheers in addition to all the best !.

  5. mrstarware says:

    Oughto. The kudos 2 box got pushed below (at an awkward angle) the last box in the row. They really ought to resize better. I think there are website(s) that can let you view your webpage on other people’s computers. (with their permission of course). This is so you can verify it on multiple machines including mac, and nonstandard web browsers.

  6. vgnaut says:

    Great update, like the new look and the responsive design and of course the updated blog. However I would suggest to use em instead of px for media queries, more here why http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ (zoom)

  7. I think responsive web design is one of the best ways to design a site now.