Center Text in Hero Section While Maintaining Image Height

·

I want the hero section of this page to fill 100vh but the picture should always be the same height and the text should be centered in the white. How can I do that? Read only link Thank you

8 comments

Matt J.
·
Sara M. have you tried just dropping header 30 in as a starting point? https://library.relume.io/components/header-30
Sara M.
·
I just tried that and it didn't work but it gave me an idea how to make it work. Thank you! What's the difference between VH and SVH?
Matt J.
·
actually not sure what the difference is - I know that SVH means Static Viewport Height - which is the opposite of DVH - Dynamic Viewport Height. Maybe SVH is just a way to be explicitly saying that it shouldn't be dynamic.
Sara M.
·
got it. thank you
Matt J.
·
Sorry had to run out for dinner quick, so DVH is for like an example with iOS Safari when the browser URL bar or action bar disappears on scroll - you still want things to be responsive to the actual viewport no matter what is actually on the screen.
Sara M.
·
got it. so what measurement should I be using then?
Matt J.
·
yeah I dont have a hard and fast answer to that one honestly - I suppose DVH would be the safest but I'd probably checkout some T.Ricks videos to see if he has any direction, pros/cons for VH/SVH/DVH and VW/SVW/DVW.
Sara M.
·
the relume components use SVH