[ad_1]
[ad_2]
Issue: On desktop it works like a charm but the page won’t display the normal background when seen from a mobile device (or inspect element in mobile view) instead it displays a white background, with some of the text still being seen.
If someone finds the issue dm me and I’ll PayPal $10.
For more context it’s a seedprod “coming soon” page with a wpforms form.
Good luck!
Where have you added the background image?
Add it in Global Settings > Background
This will put it as the Body background.
Desktop mode, the background image is [https://thesigiltest.com/wp-content/uploads/2024/08/sick-logo-background.png](https://thesigiltest.com/wp-content/uploads/2024/08/sick-logo-background.png) – that’s working as expected.
When viewed on mobile, this media query is used:
@media (max-width: 544px) {
body, .ast-separate-container {
background-image: url(https://thesigiltest.com/wp-content/uploads/2024/08/chainsfinal.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
}
The “chainsfinal.png” image is 404’ing, hence no image displaying on mobile.
You can pay me via my buymeacoffee link on my profile 🤣😂
Somewhere in your code you have an CSS media query that swaps the background image file for your <body> tag. The new BG image returns 404 as its not found.
background-image: url(https://thesigiltest.com/wp-content/uploads/2024/08/chainsfinal.png);
This is the culprit.
If you’re using a page builder, rename the image you’re using as background (download it from media if you can’t find it locally) then reupload it and then select the container/grid that has it’s background style as that image and choose the new image (the one that you just renamed and uploaded) to be the background image, publish/save, it should no register fine in both desktop and mobile, let me know if it worked or not.
So who won? 😀