Header image has gaps around the sides and at the top

[jamie2364]

Hi, on all my pages I’ve inserted a header image: https://www.jamieharrisonguitar.com/slow-dancing-lesson/

But you can see on the right hand side of the image there is white space and at the top of the image there is also space. I want the image to extend to the edges of the browser window (responsively) and also to not have that gap at the start. Can you tell me how I can do this within cornerstone

[ruenel]

Hello There,

Thanks for writing in! It turns out that you have set up the header image incorrectly. When setting up header image, you should not be using image element. You will have to use the image as a section background instead. You’d have to add a gap element in the column to set a minimum height for your header.

I went ahead and edited your page. I enabled the advance mode in X > Settings so that the section background option will show up. I removed the image element and inserted a gap element with a minimum height of 350 pixels. I inserted a background image in the section. And it displays with no spaces on top or in the sides.

Please check the page now.

[jamie2364]

Well, yes, that works for desktop - but now when I go to the mobile version of the page, the sides of the image are completely cut off and it’s not responsive like it was before. Any ideas?

[mldarshana]

Hi There @jamie2364

I have tested your site on different small screen sizes, but I could not replicate any issues.

First, try clearing your browser cache and re-test. If you’re still having any issues, could you please provide us with a screenshot of your issue, so that we should be able to assist you accordingly.

Thanks!