Responsive Hero Content

[FFRedshirt]

Hi Gang,

I’ve been messing around with this and trying to figure out a solution to this. I have a hero section that has a full bleed cover photo then hero content on the left side of the hero. Then when the browser collapses to a smaller viewport the cover photo should stack above the hero content.

https://www.evernote.com/shard/s241/sh/86662921-afcc-495d-bf42-8d274123eab7/f2edeb2eaeb36290

I know I’ve done this before but oddly this time around I’ve completely forgotten how to achieve this… I want to say its some sort of padding percentage method but I don’t recall

In the past I would just completely hide the content and show a different div below the hero using media queries.

Here is where I’m at on codepen:

http://codepen.io/ants/pen/LkjgRy

What do you guys suggest? Would flexbox work here (dont have much experience with it)? What do you think is the best approach? Would love to hear from others!

Thanks Guys!

[Atelierbram]

Here an example how this can work on smaller screens with background-size: contain and a percentage value of 66.66666% for padding-top on the hero. You may still have to figure out with this how it would work with your image on larger screens.

http://codepen.io/atelierbram/pen/JKyggX?editors=1100

[FFRedshirt]

Thanks for your pen Atelier!

Do you think it would be more elegant to build this out using flexbox?

[FFRedshirt]

Heres my flexbox version!

http://codepen.io/ants/pen/VjAkoX

[Author]

Posts