Menu icon Foundation
Full-screen hero section

Hi,

 

What's the best way to create a full height/width hero section in Foundation? I've seen people do this with Javascript as well as just CSS. Just curious, as a beginner, what the best way to approach this in Foundation would be, and if there are already even pre-set ways of doing this.

I tried to post examples earlier, but my post was tagged as spam, but openplay.co and warfareplugins.com both use the type of hero module I'm talking about.

Thanks in advance for any help!

Fullscreencss

Hi,

 

What's the best way to create a full height/width hero section in Foundation? I've seen people do this with Javascript as well as just CSS. Just curious, as a beginner, what the best way to approach this in Foundation would be, and if there are already even pre-set ways of doing this.

I tried to post examples earlier, but my post was tagged as spam, but openplay.co and warfareplugins.com both use the type of hero module I'm talking about.

Thanks in advance for any help!

Rafi Benkual almost 2 years ago

You can do this with flexbox easily. Using vh for height allows you to vix it to viewport height

https://codepen.io/rafibomb/pen/ZXOZqo?editors=1100

Rob T almost 2 years ago

Excellent, thanks so much!