Hello,
I have a website that was created using Site Origin’s Page builder.
https://www.santoshayoga.cz/ I’m trying to change the content background, whereas I’ve made it work for the website when shown on desktop (you can see there is a gree background picture), but the background won’t change on mobile/tablet. The setting is the same for all, I tried to also play with other options, however on mobile devices it does not reflect, so the issue must be something else. I can’t figure out what could be wrong here.
I reached out to the support of the Astra Theme, but after their investigation, they told me it is a bug on Site Origin’s side and that I should contact you.
Thank you in advancce for your help.
Jirka
Collison with Astra Theme – Content Background not working on mobile devices
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Jirka
Thanks for getting in touch.
The following CSS rule is being output for mobile.
@media (max-width: 921px) {
.ast-plain-container,
.ast-page-builder-template {
background-image: linear-gradient(to right, var(–ast-global-color-5), var(–ast-global-color-5)), url(https://www.santoshayoga.cz/wp-content/uploads/2022/12/Website-Background.png);
background-repeat: repeat-x;
background-position: center center;
background-size: auto;
background-attachment: fixed;
}
}
If the linear gradient is removed, the background image will be displayed. Unfortunately, Page Builder isn’t outputting the above CSS rule. Perhaps you can ask theme support how to remove the linear gradient. Your background image is being output by the theme but only as a fallback for mobile; the gradient is the primary background.
Alternatively, if you want to investigate yourself, please, see https://wpastra.com/docs/colors-background/. The documentation mentions “Improvement (*) from Astra theme and Astra Pro v2.4.0 you will find a responsive option besides the Background option.” Perhaps check the settings for the Responsive Background and see if they exactly match the regular Background setting.