Jump to content

Web site elements stretched and overlapped vertically on big monitors


pwired
 Share

Recommended Posts

Hi,

If I check a website on my laptop with a 17 inch screen and 1024 x 768 res, everything looks ok.

But, when I check the same website on a big monitor with a 25 inch screen but with also 1024 x 768 res,

things look vertically stretched ! Even some stretched pictures start to overlap things underneath them.

I tried to fiddle with css but without success.

Anyone knows a solution ?

Link to comment
Share on other sites

Fair enough, but you could at least copy the HTML, CSS, JS, strip all sensitive data (replace content with lorem ipsum, replace logos, links etc.) and post a copy somewhere? The description you gave is just too minimal. It's probably a CSS issue, but without more infos, I'm afraid no one can help you.

  • Like 1
Link to comment
Share on other sites

Hi,

If I check a website on my laptop with a 17 inch screen and 1024 x 768 res, everything looks ok.

But, when I check the same website on a big monitor with a 25 inch screen but with also 1024 x 768 res,

things look vertically stretched ! Even some stretched pictures start to overlap things underneath them.

I tried to fiddle with css but without success.

Anyone knows a solution ?

Is the issue on the 25" site exclusive to the site you're building?

Link to comment
Share on other sites

What about Pixel Density, Browser and OS Versions? Maybe the monitor is just misscallibrated.

Everybody is on win7, some have chrome, others firefox. Never checked pixel density though.

Had to look with google how, I checked and it's on 100 % on all monitors.

Is the issue on the 25" site exclusive to the site you're building?

Actually it seems to be only on the monitor of my Boss. He wanted to have christmas animations

on some webshops and that is how it showed up.

Is is possible to give a website a max-height ? Does something like max-height work on the body tag ?

I have seen that setting a fixed width on the body tag is working, what about a fixed height ?

Is it possible to keep an animated gif inside an area so that it will never overlap something underneath ?

I don't think this will solve the problem. It looks to me that the monitor is the cause and not the webshop.

Though it stays weird to me. If a site is stretched vertically due to a huge monitor, all elements should

become stretched and not that they start to overlap each other.

Link to comment
Share on other sites

One thing you could try, just as a process of elimination, is with the containers where you are getting the overlap, set overflow to none. 

If they then are chopped off, then it is probably not the monitor, but the web browser - perhaps very old firefox or something.

If that is the case, then you will need to change the way the elements are positioned within the container to make sure they stretch the container down. Make sure they are not using position absolute, for instance.

  • Like 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...