Dynamic content overlapping when zoomed in. Help?

Is this solvable? I notice on a static page, when a user zooms in, the content scales nicely. But on dynamic page built with a collection, the items overlap and my client is not happy about it. Any way to keep dynamic elements from overlapping when zoomed?

Static page:


Dynamic page:


Here is my site Read-Only:


1 Like

That’s a very very good question about accessibility. We usually don’t design for users who zoom using the browser zoom function, that’s considered an edge case. Most designers will ditch fixing such an issue, by not considering it as a bug. But zooming is important for a fair share of the older part of the population. They’d be better of setting a different solution in place, such as increasing the general resolution of their operating system, but we can’t put that on them because that’s a technical thing to do and OS are often not doing a great job at explaining it (macOS kind of does though).

Your client is right asking that you look for a fix.

Can you please relink your CMS content? The link leads to a 404, and I can’t find a page where I can reproduce the overlapping.

Thanks anyway, I found the fix. The CMS items needed to have a minimum height set. Fixed now:

This now zooms properly in the browser:


It does :slight_smile: Thanks for raising the topic though.

A web page is a flow of elements and by nature, zooming them will most likely make them to bounce one against another and reorder the best they can. By setting elastic properties on your elements, using % as much as you can, you can avoid zoom bugs and make your responsive strategy painless because everything pretty much behaves good before you have to touch anything.

Hi @vincent! I’m sorry to hijack this post–I wasn’t sure if I should start a new thread, but since this one is still open, I believe I’m having the very same issue on my site. I’ve been using percentages wherever I can, but some items seem to scale while others do not and I can’t figure out why…

Specifically, when I zoom out using the browser zoom functions, the navbar and white container on the page don’t scale down at all. I also tried setting a minimum % with no success. I would really appreciate it if someone could take a look and tell me what I’m doing wrong. :confounded:

Here is the live page:

And here is the read-only link to the site:

For example there a 10vh element in your navbar, so it will always be 10vh, whatever the user zoom value is. pass it to auto and manage its height with top and bottom padding, and you’ll that it becomes sensible to user zoom.

That’s a good thing that you want to make your design react well to user zoom. It’s an important part of accessibility. It’s more rare to see users zoom out that zoom in though.

And you have to consider use cases. For example, my vision isn’t excellent, and I’ll sometimes, rarely, zoom in one step or two on sites that have text in 12 or 14px size. But in this case, I surely don’t want the page’s element to change dimensions. I want to site to stay clean, and only the text size to increase, and of course the height of their container elements, to account for the increased size in the flow.

@vincent You rock! Thanks so much for the quick response! :slight_smile:

1 Like