search

neu-fi / regen-bingo

Monorepo for both backend and contract developments of Regen Bingo!
https://regen.bingo
2 stars 1 forks source link

Mobile Hero Section #126

Open oytuncoban opened 1 year ago

oytuncoban commented 1 year ago

Currently, mobile hero section is managed with hard-coded viewport height. We should use flex and flex-grow. However, to push the footer on the bottom, we use flex-grow on main tag. This makes main's length too long. If we use the flex-grow on hero section, it has no effects.

Expected behavior: Hero section grows to remaining viewport height.

Render tree:

<Layout>
    <Header>
    <main>
       <page>
           <Hero></Hero>
           ...
        </page>
     <Footer>
     </Footer>
     </main>
     </Header>
</Layout>
hantuzun commented 1 year ago

"hard-coded viewport height" Do you mean, it's not reactive to the height of the user device?

oytuncoban commented 1 year ago

"hard-coded viewport height" Do you mean, it's not reactive to the height of the user device?

Since I couldn't make it fully reactive, and I mean components being reactive to each other, I assigned max-height and min-height to header and main sections as viewport height, "vh". That's what I mean for hard-coded. I have to change the Layout tree If I want the hero section to appear with the bottom border of the component is on the bottom border of the screen and pixel-perfect on all devices.