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?

---

Template Version: 10.0.0

[JohnAlan]

This was posted in the wrong forum – should be in Porto – Responsive HTML5 Template. I posted there – feel free to delete this one!

---

• This reply was modified 10 months, 3 weeks ago by JohnAlan.

[Author]

Posts