Streaming live at 10am (PST)

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.