CODEWITHSUNDEEP
htmlcss
Alex Nibley
Alex Nibley

Reputation: 141

Webpage looks perfect on smaller screens only when zoomed out

I have created a template with a couple of more "difficult" or problematic CSS features, such as a fixed-position, full-width navigation bar that has overflow scrolling, and another column-like position:fixed element also with overflow scrolling. All my font sizes are set in em's.

The site looks ideal on large desktop screens, but not smaller, i.e. most laptops. But if you zoom out in the browser on a smaller screen (command/control-minus) it looks ideal again, actually equivalent to a larger screen. The problems when first loading the site on a smaller screen are actually identical to zooming excessively (maybe 250%) on a larger screen.

Most of the problems seem to have to do with width: the fixed-position navigation bar has text links that have no way to be scaled down, so I have overflow-x: auto. Also, there is a centered column that contains all the content to visually distinguish from the background image, and its contents break from the excessive zooming because they become too wide.

How can I make my page zoom correctly at the browser zoom level of 100%?

I get the feeling the answer is a fundamental CSS concept that I missed out on understanding in my self-teaching, so apologies if it seems obvious.

Thank you.

Upvotes: 0

Views: 2959

Answers (3)

Daniel Chu
Daniel Chu

Reputation: 96

I've encountered something similar. For me, it was because my site was loading google fonts via http://. This worked fine on the local system, however the webserver hosts over https which meant that the http:// google font link was getting blocked by the browser for security reasons. This caused the site to look slightly smaller or bigger.

Solution: Change to https:// for the google fonts and other related urls.

Upvotes: 0

Jamie
Jamie

Reputation: 1094

First, I have experience what you are doing ( Something like position:fixed div ), so it is difficult to customize it for divs or ps.

Therefore, you need to consider a solution such that the element will hide itself on screen too small.

E.g. detect mobile browser and hide it, etc.

This could be more convenient if you use php instead, because you can surely find a template to detect mobile.

Check this out and see if it suits you : Detect Mobile Browsers

Upvotes: 0

user2477011
user2477011

Reputation:

This might be of some help. Put this in the head of your document.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

Edit:

While this probably won't directly solve your issue. It may be a short term fix to make your site usable until you make your entire site responsive.

It tells the browser what zoom level to start at and other stuff. You should experiment with what works best for your design.

Upvotes: 3

Related Questions