Web Design Articles

Recently whilst working on a client’s project, I realised that I hadn’t optimised the website for resolutions 1024*768 and lower.

Optimum AV

You’ll notice that being forced outside of the main content wrapper are some tabs for headings;

At the resolution 1024*768, these caused an annoying horizontal scroll;

So, what to do! I didn’t want to entirely remove them, as they were adding a nice slice of personality to the design. Similarly, I didn’t want to make the whole site thinner, as it would have been a nightmare!

So the solution? A screen resolution stylesheet. Here’s the code;


<script type="text/javascript">
winWidth = document.all ? document.body.clientWidth : window.innerWidth;
winHeight = document.all ? document.body.clientHeight : window.innerHeight;
if(winWidth < 1030) {
document.write('<link href="css/ten-twenty-four.css" rel="stylesheet" type="text/css" />');
}
else({})



The value ‘1030′ is chosen because if their window size is 1031, the website works fine, so make sure to change this value depending on where your horizontal scroll begins.

In my ten-twenty-four.css file, I tell those tabs to not display, effectively removing the horizontal scroll;


body #content .left .side-left { display: none; }
body #content .right .side-right { display: none; }


The javascript technique I decided on was selected from quite a lot of solutions that I came across, and this one was the simplest, and easiest to modify.

Not only that, but it works perfectly!

See the code in action (if you resize the page, make sure to refresh).