Row Background Image Distorted on Mobile - PLEASE HELP!

Hello all,

I added a row to my front page and set a background image that spans the entire row on the desktop. However, when viewing on my mobile device only a small portion of the image appears.

Website Link: www.ogoezeofor.com

Does anyone have a clue on how to make the full background image appear without getting chopped off or distorted?

Thanks in advance!

Hello @ogoezeofor,

I have just checked your website and that row background looks okay on low resolutions. Can you please provide some explanatory screenshots? You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Thanks for checking Roman!

The distortion only occurs when viewing the website via Mobile device.

Please see the attached screenshot taken from my iPhone 7.

Regards,
Ogo

Hello Ogo,

I have just checked your website on Android phone and it looks fine there, so it looks like your problem is iOS-specific. I will ask our Developer to check this issue.

Kind Regards, Roman.

Hello Ogo,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (max-width: 1024px) {
    .panel-row-style {
        background-attachment: scroll !important;
    }
}

Kind Regards, Roman.

Thanks Roman. That CSS solved the problem.

Regards,
Ogo

You are welcome Ogo!

Kind Regards, Roman.