Browser Zoom Pushing Image Off Header

[kickinrad]

Hey Themeco,

I am having an issue with a Pro header on one of my sites. It seems like browser zoom is really not scaling things well. The main issue is the cut-out image is getting pushed off the top of the page, but really the buttons and text seem to become huge and sort of break the formatting. It is worst at 150% zoom level.

I tried to adjust the max width, and I tried just disabling the image for smaller breakpoints, but it doesn’t seem to help much for 150% zoom.

Any tips or info that can point me in the right direction would be appreciated!

[ruenel]

Hello @kickinrad,

Thanks for writing in!

When you zoom in your browser, the image moves up because of the 32vh bottom padding in one of the text elements on the header. As you zoom in, the 32vh also increases. I would recommend that you use em units in your padding instead. Feel free to adjust the padding when it is needed.

We would love to know if this has worked for you. Thank you.

[kickinrad]

Thank you so much for the reply @ruenel!

I thought I had fixed that while troubleshooting, but you are right I did have a 32vh padding lurking in break point for a smaller screen size.

Unfortunately, that didn’t seem to fix the problem for me. In fact, I can see that at 150% zoom on Chrome it is still using the full desktop sizing, so it seems like break points won’t help. Which sucks because it would be easy to take care of if so.

I also tried to compromise by bumping things down a bit on the page, but it still looks really bad at 150% zoom. Is there some way to just tag an element to not enlarge with browser zoom?

This wouldn’t even be an issue, but a surprising amount of people run Chrome zoomed in (probably older users whose eyes are failing them). So even though it looks great at 100%, having 150% so broken is really not ideal.

Any other ideas? I considered setting up a custom CSS break point just for that element, do you think that could help? I am just not that familiar with how browser zoom works when compared to doing normal responsive design for mobile.

Thanks again for the help.

[rad]

Hi @kickinrad,

The zoom feature of the browser is non-standard and site design shouldn’t be based on it. But I agree that the browser should handle it correctly for accessibility. And yes, breakpoints will not work on that one since it’s simply zoomed, not resized, the breakpoint may only work with device width sizes.

Another example that affected by zooming it are pixel-perfect designs where it needed to be pixel accurate. Like on responsive sliders with the strip effects, and the responsive strip as calculated as 13px width, but since it is zoomed, the value can be 12.2px or 13.9px.

Then since there is no decimal on pixel value 12.2px or 13.9px, then it will default to 12px to 14px, which means 12px is less 1px than 13px, creating a gap between strips, and 14px is greater than 13px creating 1px overlaps or pushing other strips out of the layout. That’s just for 1px difference, that could happen on greater pixel difference causing layout issues. Unfortunately, that would require complex development if you’re going to optimize your design to zoom changes since it’s not doable with just breakpoints and CSS.

Thanks!