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•2y 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:
index.vue:
hope thats good?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