Mobile Hero Section

[oytuncoban]

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]

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

[oytuncoban]

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