covers/headers responsiveness

gournelo — Fri, 15 Jul 2022 18:17:18 +0000

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

Reply To: covers/headers responsiveness

gdandrija — Wed, 17 Aug 2022 12:47:23 +0000

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

Ph sabong net login registration.Enjoy Free 888+200 Daily Legal Bonus

covers/headers responsiveness

Reply To: covers/headers responsiveness