Zoom breaks layout in header (logo zooms)

[JohnAlan]

This has always been the case and I previously wasn’t too bothered about it, but a recent (this morning) update to Chrome / Android (Chrome 119.0.6045.163 on Android 14 on Pixel 6) means it’s far more common.

Chrome now uses the device’s zoom settings as the default “100%” zoom on websites. So if the user has everything zoomed to, say 150% in their device settings, Chrome now uses this as the base 100% in Chrome (to see the site as it “should” be, you’d need to zoom OUT).

So, a lot of websites suddenly look different if the user has anything other than the default zoom level in general device display settings (quite common).

In Porto, this affects mainly the header because the logo is zoomed and knocks the header width to larger than the viewport. I fixed this on the URL provided by adding: –

/* limit logo size on zoomed views */
@media (max-width: 575px) {
 #header .header-logo img {
  max-width:35vw;
  }
 }

to css/custom.css, and removing the width / height attributes from the logo HTML. But I have many Porto sites and this problem is showing on them all.

The “default” Porto logo is relatively narrow (123px), but this can be seen if you go to https://www.okler.net/previews/porto/10.0.0/demo-restaurant.html at say, 575px width then zoom to 200%. It requires much lower zoom if the logo is any wider.

Is there a simpler / more elegant solution to this problem that will work across all Porto demos? i.e. can the logo be set to ignore zoom settings somehow?

---

• This topic was modified 2 weeks, 6 days ago by JohnAlan.

Template Version: 10.0.0

[Support]

Hi, sorry but I could not understand it very well, can you please provide a screenshot from that?

Thanks.

---

[JohnAlan]

Hi,

See https://www.loom.com/share/da38c8575519448890c8fec16291dee6?sid=8d59542c-5f7c-4ab1-b542-ac790992067b

Logo is 200 x 48, zooming to 150% breaks the header, the hamburger menu is knocked off the screen.

I need the logo to stay max 200px wide even when the browser is zoomed.

---

[Support]

Hi, OK, your solution to limit the logo size with max-width is good, you can also disable zoom if you want:
https://www.w3docs.com/snippets/css/how-to-disable-zoom-on-a-mobile-web-page-using-html-and-css.html

Or even add css for a specific zoom level:
https://www.tutorialspoint.com/how-to-adjust-css-for-specific-zoom-level

---

[JohnAlan]

Thanks,

Re your links, disabling zoom via HTML and CSS isn’t recommended as most browsers ignore it now, anyway, and always allow zooming. I didn’t know about zoom level media queries, though, so thanks for that!

I’ve tweaked my fix to: –

/* limit logo size on zoomed views */
#header .header-logo img {
  max-width:min(40vw,200px);
}

(note the 200px is the width of my logo image)

and I also added the following to stop very large vertical spacing on the header when zoomed: –

/* fix header height (noticeable on zoomed views) */
@media (max-width: 991px) {
  #header.header-effect-shrink .header-container {
    min-height:unset;
  }
}

while also removing the hard-coded height in: –
<div class="header-container container" style="height: 110px;">

I’m not sure why that’s there?

Together these seem to do an OK job of keeping the header OK when zoomed in to max around 175% – 200%.

---

[Author]

Posts