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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
★𝖕𝖆𝖓𝖉𝖆☆
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
Wolle2y 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.
★𝖕𝖆𝖓𝖉𝖆☆
👍 awesome thanks for the help
Want results from more Discord servers?
Add your server