Kevin Powell - CommunityKP-C
Kevin Powell - Communityโ€ข10mo agoโ€ข
25 replies
Thib

Using grid "zooms out" on mobile

On my website, all pages are using this body

  <body>
    <div class="full-height">
      <Navigation />
      <main>
        <slot />
      </main>
      <Footer />
    </div>
  </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

  .full-height {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }


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.
Gear Review - Kobo Clara 2E
Was this page helpful?