The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Hero Content

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #243446

    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.

    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:

    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!


    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.


    Thanks for your pen Atelier!

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


    Heres my flexbox version!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.