[mpl92]

Hi! Are there any plugins or codes to make my header image compatible with mobile? It looks great if I turn my phone horizontally, but it cuts out a lot of the image when my phone is held vertically. The header image has text so it’s basically just showing random letters when the phone is vertical. Thank you!

[Skandha]

@mpl92: Hello there,

Can you please post in your site URL so that I can look into the issue?

Kind Regards,
Skandha

[mpl92]

It’s http://www.mariapolansky.com

If you visit on mobile, you’ll see that the text on the header is cut off when the phone is held vertically. Thanks for taking a look!

[mpl92]

Hi Skandha,

Sorry if you are still looking into this, but I also tried an adaptive images plugin. It didn’t change the header on mobile, so I also contacted their team and they gave me this response:

It is this CSS property in this element https://prnt.sc/26l93nx/ that causes the image to extend beyond the visible part of your screen in mobile screen sizes. If it could be changed to this https://prnt.sc/26l968i/, ie background-size: contain;, then the whole of the image would be contained inside the element and the screen.

It’s a little hard to say how your theme could accommodate this change. Perhaps it is some setting it can provide? Or perhaps a page builder? Or, ultimately, one could write some custom CSS in a child theme or in the Customizer.

Again apologies if this is stepping on your toes but maybe it’s helpful. I’m not really sure what I can do on my end with this information though, as I don’t know how to change CSS property.

Kind regards,
Maria

[Author]

Posts