Kevin Powell - Community•15mo ago

How to achieve this design?

Trying to build my website with Nuxt3 but im running into a hiccup where I cant get my CSS right to achieve what i want to do. In my figma design i drew up where I would have my logo in the center of the page (https://imgur.com/a/QqMWA9p). But what iv come across is when i set my html, body, and nuxts div with the id of __nuxt to a height of 100% it causes my footer to be off the page and my hero logo to be off centered vertically (https://imgur.com/a/AyCkBaQ). What should I try to do to achieve my figma design?

4 Replies

Unknown User•15mo ago

Message Not Public

𓆩panda𓆪•15mo ago

yes, from what i understand Nuxt puts everything inside a div with the id of __nuxt which is inside the body default template:

  <div class="h-full">
    <header class="mb-5 bg-neutral-900/50 backdrop-blur-md sticky top-0 z-50">
      <nav
        class="container m-auto p-8 flex justify-between text-2xl items-center h-8">
        <NuxtLink class="flex items-center cursor-pointer" to="/" id="nav-logo">
          <Logo class="mr-1 w-full" />
          Space Bear
        </NuxtLink>
        <ul>
          <li><NuxtLink to="/">Home</NuxtLink></li>
        </ul>
      </nav>
    </header>
    <main class="container m-auto h-full">
      <slot />
    </main>
    <footer class="container bg-neutral-800 flex justify-end mt-auto m-2">
      <p>
        Made with 💜 by
        <a
          class="underline"
          href="https://github.com/FroggyPanda"
          target="_blank">
          Panda
        </a>
      </p>
    </footer>
  </div>

  <div class="h-full">
    <header class="mb-5 bg-neutral-900/50 backdrop-blur-md sticky top-0 z-50">
      <nav
        class="container m-auto p-8 flex justify-between text-2xl items-center h-8">
        <NuxtLink class="flex items-center cursor-pointer" to="/" id="nav-logo">
          <Logo class="mr-1 w-full" />
          Space Bear
        </NuxtLink>
        <ul>
          <li><NuxtLink to="/">Home</NuxtLink></li>
        </ul>
      </nav>
    </header>
    <main class="container m-auto h-full">
      <slot />
    </main>
    <footer class="container bg-neutral-800 flex justify-end mt-auto m-2">
      <p>
        Made with 💜 by
        <a
          class="underline"
          href="https://github.com/FroggyPanda"
          target="_blank">
          Panda
        </a>
      </p>
    </footer>
  </div>

index.vue:

  <h1 class="flex justify-center items-center h-full text-9xl">
    <Logo />
    Space Bear
  </h1>

  <h1 class="flex justify-center items-center h-full text-9xl">
    <Logo />
    Space Bear
  </h1>

hope thats good?

Wolle•15mo ago

Try not to use height: 100% unless you are sure you need it. If you want to change the scrolling element you can set that to height: 100vh and the direct child to min-height: 100vh. If you do not care which element scrolls, I would suggest changing th h-full on your div to h-min-screen and remove any h-full (especially on your main). Your main is 100% of the parent, so there is no room left for the footer. To make the main grow I would use flex on the parent and flex-grow on it. If you want grid you could set the header and footer row to auto and the main to 1fr.

𓆩panda𓆪•15mo ago

👍 awesome thanks for the help

Gaming

Programming

How to achieve this design?