Using grid "zooms out" on mobile
On my website, all pages are using this body
I use the
full-height container to ensure that the nav is always on top, and the footer is always at the bottom of the page even if the main content doesn't fill up the whole space.
This is the css I'm using to do so
This works decently, but when I have rather large content on some pages, like code blocks, the whole page is "zoomed out" on mobile. A good example would be: https://ergaster.org/gear/kobo-clara-2e/
I've tried adding grid-template-columns: 100dvw; as a dirty workaround. It seems to work in Firefox, but doesn't at all on Safari.
Removing display: grid; removes the "zoomed out" effect, but as a result I'm not sure that the footer is always going to be at the bottom of my page.Gear Review - Kobo Clara 2E
Is the Kobo Clara 2E a sturdy, reliable and durable piece of equipment? Let's review some good reasons to get it, where it falls short, and how well it does overall.
15 Replies
sounds like you are missing the viewport meta tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
or you have something overflowing the page so badly the browser pretends your page is an old unresponsive page just for pcs
I'm using astro as an SSG, and it looks like it automatically adds
<meta name="viewport" content="width=device-width"> in the generated html, so I'm tempted to think it's the latter
I'm not entirely sure how to fix it though :)the easiest method is to add an outline to everything
if you have a shitty reset, it might impact how the outline works
but usually just add an outline of 1-2 pixels and you will see what's overflowing
I'm fairly certain it's coming from the code blocks.
For example:
- https://ergaster.org/posts/2022/02/14-raspi-encrypted-backup overflows
- https://ergaster.org/posts/2025/02/28-prosthetics-that-dont-betray doesn't
I've tried adding a
* {outline: 2px solid red;} but it's not super helpful since the content is zoomed out, and nothing really overflowsEncrypted Backups on a Raspberrypi with a Sleepy Disk
I use my Raspberry Pi to perform offsite, encrypted backups of my VPS. The backups themselves are monitored by a third party service.
Prosthetics that don't betray
Tech takes a central place in our lives. Banking, and administrative tasks are happening more and more online. It's becoming increasingly difficult to get through life without a computer or a smartphone. They have become external organs necessary to live our life. I believe computers & smartphones have become prosthetics, extensions of people th...
have you tried to put a maximum width on the div?
I just gave it a go with
max-width: 100dvw; without much success
Same with 100vw instead
What puzzles me is that commenting display: grid; fixes it (with the caveat that my footer will not always be at the bottom of the screen if the body is too "short")
Oh! I think I've solved it by adding the following bit in my CSS
Yup, that was it! Thanks for the help along the way :)quite honestly, i have no idea why that works
Truth be told I’m not entirely sure either, but it does seem to work so I’ll take a note that I have one weird fix here and try to bear in my next time something blows up on my website!
I would be immensely grateful if someone could break down why it works though. Who knows, it might be a fun challenge for Kevin 😁
it would be interesting go have an explanation, not gonna lie
Is this issue just on iOS or on Android too?
Assuming that this is only happening on iOS Safari, it could have something to do with how Safari is interpreting the grid columns. As you haven't defined a column width it is opting for "auto", which will be using the min-content as a min width and this is forcing the "zoom".
An alternative solution to what you already have (which is working) is to define the grid-auto-columns width with
grid-auto-columns: 100%;.
[edit] - on re-reading your previous comments I see that you did try defining column width so this is pretty much the same - I wonder why it didn't work withgrid-template-columns 🤔
[edit 2] - grid-template-columns:100% does work, so that specific issue seems to be that Safari doesn't like the dvw unit that you had tried.
The question remains - "how" is Safari iOS calculating the auto width?not that well, i bet
What puzzles me is that commenting display: grid; fixes it (with the caveat that my footer will not always be at the bottom of the screen if the body is too "short")
This works decently, but when I have rather large content on some pages, like code blocks, the whole page is "zoomed out" on mobile. A good example would be: https://ergaster.org/gear/kobo-clara-2e/There's a weird thing with
<pre> and grid that might be causing your issue (or more specifically, when you text that doesn't wrap).
If the pre is the direct child of the grid, there's no issue, it's when it's inside an element that's a grid item, it seems to mess up the sizing of the auto column.
It's not Safari specific either, I've had this happen in Chrome multiple times.
if it's that, the solution is, where you have your full-height, add a grid-template-columns: 1fr
Edit: the grid-auto-columns: 100% Chris mentioned would have the same effectis it caused by the whitespace? 🤔
Removing the
overflow: auto; in my main and adding grid-template-columns: 100%; to the .full-height does work, but it doesn't work with 1fr
tests on iOS toooh, for some reason I had it in my head 1fr works, guess it's 100%, which makes sense 🙂