You may want to try an image that is center focused.

I ended up removing the header from the page and just adding the image back in as a separate element. Seems to get the job done.

The amount of horizontal space shown with an image is determined by the the height of the image, so you'll likely need to reduce the height of the header area on mobile so more of the image is shown horizontally.

Hi,

I have this same issue, I have changed the theme and it works fine then but I want to use the Venue - Blog Theme as it looks good. My site is www.thephotoboothtoronto.com, looks fine on desktop and everything looks fine on mobile except the header. The header looks fine in landscape but in portrait it gets cut off by this grey column on the right hand side.

Is there a way to fix this?

Hello! So far, I haven't been able to reproduce it here. Is there a specific page on the site that happens on?

I don't see a header image on that site, @ranjani4ever; did you change it to be a solid color?

Hi Adam, yes, I had a immediate requirement to give a presentable site and hence changed it. Should I revert it back for troubleshooting?

You can do that if you want, although I suspect that the solution will be editing the image some so the proportions are a little different.

Add spacers to the image. Took me months to figure this out!! 

That worked!!!!!! Can't thank you enough!!!! 

Hi there,

Could you be more specific about exactly where the spacers should be added?

Many thanks,

Sarah

OMG!  Finally a simple answer to the solution!  Thank you sooo much!  This was a completely irritaing problem.  I added one spacer to the top of my background photo and it has instantly solved the cropping issue. 

How do you reduce the size of the header on mobile only?

Please reply to kristen@thelighthouseministries.org

Thanks!

Can you post a link to your live site @kristenlighthou? That will help other members get an idea of what you are looking for. Thanks!

I have the same question, regarding how to change the header only on mobile so that it looks like its supposed to. The desktop looks great, but the movile version cuts off the image both horizontally and vetically. I found adjusting the padding will fix the header issue, but then it will squeeze all the text on the page. I've looked through the CSS already and there's not much else I can change. Is there anything I can add? I have edited alot of CSS with the theme I have so changing the theme is no option. Thanks!

https://www.kapenakai.com/specialty-retailers.html

mikey@kapenakai.com

Edit: Adding spacer helped the mobile version tremendously. But it's still not 100%. The Tablet version still needs help.

Hey, 

I'm having kind of the same problem. My client wants his bussiness card as a headerbackground. It looks and works great on desktop design. But when I go to mobile design the header image is cut off. Any advice?

All things work great on desktop and mobile design.

Theme I'm using: desk - event (I rather not switch themes) the website is ready I only have this issue described above.

Thnx in advance!