Header on mobile view is much to large (though desktop is fine!)

[convictor89]

Does anyone have a fix for an image in the header on a mobile view? I uploaded an image which is well sized for a desktop or computer view, but once it loads up on mobile view, only the middle portion of the rectangular image is visible. 

Website link is lanzitherapy.ca

[Bernadette3]

Hi @convictor89 This is going to happen based on the ratio aspects of the header image. If you can make it more square you will see more of the content, if that makes sense. 

[hitchcackle]

****nevermind! I found the answer somewhere else in this forum**** .   thanks anyway!

@Bernadette Is there a way to customize the size/ratio used for the responsive break points? In other words, can I decide how big the header will be at the different screen sizes?

So far I've adjusted and nudged as necessary to get the best possible result, but I feel like I'm just guessing and I don't really know how it works.

Are there specifications that I can follow to have the header image be as consistent as possible across screen sizes?

Thanks,

Adam

[Bernadette3]

As far as I know this isn't possible, but I'm also not super familiar with making html/css edits in the theme section. It might help if you post a link to your site. Sometimes users on here are able to help out with those types of edits.

[convictor89]

@Bernadette So there is no way to the header image dynamically fit automatically within both the desktop and mobile versions then, barring a more square sized image? 

[Adam7]

The images that give the best results are usually something like 2000 pixels wide and 1000 pixels high, and have around the center of the image the part that you prefer being shown so it doesn't matter as much if the sides are cropped.