My website becomes distorted on large monitors

Question

theme looks ok on the "problematic" monitors ...

any advise?

Answer 1

It's because in your CSS code you're putting percent values for the width.

My suggestion to you is to put all the page positioned at the center, or where you want to allocate it and use pixels, cm... to your other objects(parts) at your page.

Answer 2

My very uninformed guess would be that you are specifying some width as a percentage. As the window gets wider, so does that percentage.

What you want is this:

.main-wrapper {
    width: 1337px;
    margin: 0px auto;
}

That'll center it within the window, keeping the width fixed.

Answer 3

The first thing I would check is whether other sites also look distorted on the large monitor, and not just yours. Just like wide-screen TVs in sports bars, there are many mis-configured wide-screen monitors that are stretching 4x3-ratio display resolutions over 16x9-ratio screen sizes. I see it all the time.

Answer 4

You have several div's in your site with the id "content" You should remove all of these id's for two reasons:

1. It is invalid (See: W3C "This attribute assigns a name to an element. This name must be unique in a document.")
2. You do not actually reference it in your CSS -- you use the class "content" instead.

This may not be the cause of the problem you are experiencing -- however, it will cause you problems down the line, and it's always better to have valid markup. If you cannot modify the theme yourself I would suggest switching to a different theme that does produce valid markup, or else asking someone to modify the theme for you.

(A good way to check if a theme produces valid markup is to validate it using the W3C's Validation Service.)

Good luck!

Answer 5

I would echo the suggestion to validate the site using W3C - once you have valid code then you can start trouble shooting.