covers/headers responsiveness

  • Thanks in advance anyone that can help me with this! It’s driving me nuts. I’ve been trying to make the hero image responsive on this site, and while it gets BIGGER, it never gets smaller (it just cuts off the image; see the main domain, linked at “home” from the page linked in the forum description). I’ve tried using a Cover block, but the cover block at full width and height also isn’t responsive (see the block-testing-page linked in the forum description). Moreover, it doesn’t sit with the site-header overlapping it, but instead the block appears underneath the site-header which of course isn’t workable. What I’m looking for is simple, and standard on most pages (including most other ones I’ve built, which is why I’m so lost): a hero image that is responsive, with a navigation bar floating on top of it, and the content below the hero image.

    I’m kind of at a loss here. Does anyone have any suggestions???

    Thanks!

    Ted

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @gournelo, I hope you are doing great,

    Perhaps, this CSS code might do the trick for you. The reason why the hero image never gets smaller is the fact it has a fixed height. 

    .site-header {
    height: 50vw;
}

    This code adjusts the height depending on the width of the page. Feel free to adjust and tweak the values per your needs.

    I hope this helps, cheers!
    Andrija

Viewing 1 replies (of 1 total)
  • The topic ‘covers/headers responsiveness’ is closed to new replies.