Stretching the header image in the Velux theme

Hi @hvitravnurab,

Thanks for reaching out, I hope you are doing great.

If you noticed on the Velux theme presentation page, the header you are seeing features a call to action button.

Since the header on https://hvitravnur.com has no call to action, there is less content which results in your image being clipped significantly.

I checked your website to see what could visually work out for you, here are the options you have:

1) You can apply some code to the Widgets > Hero section. The best way to experiment would be adding additional <br> tags, then you may add an invisible content placeholder if you prefer, something like this:

<div class="placeholder-invisible"><div>

And with this div you can add the following code to Customizer:

.placeholder-invisible {
visibility: hidden;
height: 300px;
}

You may adjust the height parameter as you wish.

2) Here is a way that does not involve adding HTML, but only a code to Customizer:

.home .site-header {
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 27vw;
}

Here as well you may adjust numbers as you wish.

The bottom line is that even if you don’t have much content you may extend the existing content dimensions(in your case you have only one page title and the menu).

I hope this helps, let us know if you were able to get the requested results.

Best Regards,
Andrija

Thank you kindly @gdandrija !

I wrote an answer about me know knowing WP and coding HTML/CSS in WP bu that was fixed in 10 minutes. I got the result I wanted, thank you so much! You are a moderator angel!

• This reply was modified 4 years, 4 months ago by hvitravnurab.

You are most welcome @hvitravnurab,

I’m glad I was able to help you out and happy to hear that you got the results you wanted.

Have a wonderful day ??
Andrija