CODEWITHSUNDEEP
cssxhtmlzoomingfooter
arun nair
arun nair

Reputation: 3683

Issue with footer in webpage when zoomed in to 180% of original page width

UPDATED WITH SCREEN PRINT OF THE ISSUE: Please refer to the attached image where I have marked in red box the place where the footer terminates at 200% zoom level of webpage

enter image description here

As seen in the pic, the content is being flexible at this zoom level - there is no breaking. But the footer will always expand only this much, and the remaining is taken up by whitespace.

ORIGINAL QUESTION:

I have designed a site, and was testing couple of characteristics with the design and noticed that the footer works fine from a very low zoom level (say 10%) to nearly 180% zoom. But outside of say 180% zoom, the footer contracts, and behaves as below -

(Assume the footer to be a div with height set to 100px and height as 100px,width as 100% and having a dark blue color background).

At 180% zoom, horizontal scroll bar appears in the browser. The right end of the footer is present at the point where the horizontal scroll needs to be made, or in other words, it looks as if 100% to the viewport; only on moving the horizontal scrollbar, we will see that the footer actual ends there and a that there's white background from the right end of the footer till the actual right end of the page at 180% zoom.

I do not face this issue with the header though. It works fine at any zoom (in/out) levels. I cant seem to find the issue with the footer, as header and footer are almost identically laid out in css.

Any thoughts/ approaches on how to resolve the footer zoom issue is much appreciated.

Thanks! (and i really really hope that the issue is clear enough :)

Upvotes: 0

Views: 1825

Answers (3)

Chris
Chris

Reputation: 1

I was experiencing the same problem. I tried a bunch of different solutions. The one that worked for me was the simplest one. Not sure what your main reason is for correcting this issue, but mine is because a large segment of our traffic (10%) are using older monitors with a resolution of 1024x768. Thus they were visiting our site and needed to scroll right to see the full content. My header and footer were breaking when they scrolled right. I applied this to the body tag and it fixed everything.

body {
min-width: 1024px;
max-width: auto;
}

Hope this works out for you too.

Upvotes: 0

arun nair
arun nair

Reputation: 3683

On a funnier side, I just checked how this site's (stackoverflow.com) footer behaves on zooming in to 200%, and it has the exact same behaviour as mine. So I guess there are hell a lot of other sites out there (another one being Design Instruct - http://designinstruct.com/) with the same concern. I guess any site out there that shows a full length footer (from left to right 100% in viewport) would definitely face this issue on a little zooming in by the user.

To all who ask how this bothers me, well, if you try loading your site in any of the smartphones and the user pinch zooms it to a level like 120%, you will see the issue with the footer. For many, these might be trivial enough to ponder a night over and leave it just like that, but to me I would definitely like to see if there is a solution.

Closing this question, though unresolved, as I do not see many constructive suggestions coming. Thanks anyways.

Upvotes: 0

Joshua
Joshua

Reputation: 3603

Here's an attempt at an answer, but your post is missing several important pieces to help you out:

  1. Link? Or Need Code snippets - use pastebin or something.
  2. What browser are you referring to?

Based on the description, it sounds like your content itself will zoom / scale well up until it bumps into a hard content limitation, such as a fixed image width or long string (i.e. URL). There could also be a min-width specified somewhere in the content.

At the end of the day, this behavior might be specific to a particular browser - have you tried in other browsers? Do they all behave the same?

Upvotes: 1

Related Questions