Thib Posts - Answer Overflow

Thib

•Created by Thib on 4/9/2025 in #help

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>

  <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;
  }

  .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.

26 replies

Gaming

Programming