Resolution Issues

[kal-mc]

Hi,

 

I am having issues with the resolution of my site. For me it all works fine and I have browser tested with no issues. But I have heard back from users that the site isn't displaying well on higher resolutions. I have tested since and it is fine on IE, but distorts in high res for Chrome, Safari and Firefox

 

The site is here

 

I have included screenshots below;

 

Chrome

Firefox

Safari

 

Am I correct in diagnosing resolution as the problem? I am not sure how to begin thinking about fixing it, any help would be great

[3s-gtech]

It won't be the resolution of the screens it's viewed on - your site needs to be able to scale to all resolutions (to a degree, anyway). It looks like an with your css, in that as the site is getting wider it spills across onto the right of your header menu (menu_topmenu?)

[kal-mc]

Any idea what part of it I might need to edit? You are right, the header and footer stay central.

There is a section for main body in template.css but can't see anything that would do much.

 

I had a look at a few other sites from this template on line and the problem seems to be occuring on them too.

[3s-gtech]

Can you share the css and html? We should be able to correct that with the underlying source.

 

Edit: have found it, will take a look.

Edited March 19, 2012 by 3s-gtech

[3s-gtech]

Okay, I've just got much better results by changing the container div to this (in template.css):

 

.container{

width: 950px;

margin: 0 auto;

overflow: hidden;

padding-top: 80px;

}

 

By adding the padding, it forces the whole div below the header, so it doesn't run alongside it. I think there's still some scruffy formatting in there, but it seems to look okay in a browser with that change.

[kal-mc]

Hi, it fixes the main body moving, but throws the look of the page out when being viewed as it pads the body quite far down (and for some reason that grey bar is still flying off to the right?)

 

Picture here

 

I tried smaller numbers, but that brings back the original problem?

[3s-gtech]

Okay. Well, you have the div 'container' called twice, once for the main body, and once for a section of page that spills off to the right. This is in the html itself - I found that by deleting everything inside

 

 

This sorted itself - but this div may be used by one of your modules, so use with care! This is the deleted part:

 

 

I also changed the padding-top for the container div to 100px.

Edited March 20, 2012 by 3s-gtech

[bladedanny]

Not had chance to test, just a thought. Would adding a clear: left; to the container div force it underneath the header?

 

--edit--

Just had a quick try with a css editor and it seems to work, it corrects the issue in firefox at my resolution.

 

Hope this helps.

Edited March 20, 2012 by bladedanny

[kal-mc]

I have just tried as you suggested, but it just removed the grey line under the header section and ending up shifting to the right again (this time with the resolution not as high as before)

 

Also throws it slightly off when viewed at lower res in IE

[kal-mc]

Hi BladeDanny,

 

Have just tried that in index.php and template.css but no luck this end. Is that where you added?

[bladedanny]

Hi BladeDanny,

 

Have just tried that in index.php and template.css but no luck this end. Is that where you added?

 

Hi,

 

Yes It was in template.css in the axe rescheek red template withing .container on line 116.

 

Here is my before and after screenshots. These are just in firefox as I can't test other browsers as I only have the edit css add on for firefox.

 

[kal-mc]

Working my end on Chrome too, will test safari this evening.

That's brilliant, Thank you!!!

 

And thank you for your help too 3s-gtech

[3s-gtech]

Ha, yeah his fix was much more effective!