Tagged: background Images, mobile
Hi
On a particular page on the website I’m building, I’m using a grid row with two columns, out of which one column has text and the other column only has a background image. It works okay on a desktop, but when I view the page on the mobile, the background images don’t show at all. I checked the mobile setting in ALB, but that is set to “always display”. Please help me with this. Sharing the link in the private section.
When I add some content like Whitespace the background image starts to appear on the mobile as well, but then I have to do a lot of trial and error to make sure that I have added the right amount of whitespace. Anyhow, this seems very hacky to me. Is there some other way to make the background images visible on mobile?
PS – In the link that I gave above, I am referring to the background images in the ‘Work with women’ and ‘Work with children’ section.
Hi,
I`ve checked your image from the browser inspector and I found the “av-hide-on-mobile” and this is the reason that your image is disappearing in the mobile.
To fix it, go to your column settings > mobile > select the always display option at display mobile.
Let me know if it works :)
Best regards,
John Torvik
Yes, I had to do that as I didn’t hear from you in time for my deadline. :/
Hi architchandra,
It is because background images are kind of invisible to the browser if there is no other text or content in the container, that give some width and height to it. So the browser just ignores them. You could try to place those images as images in the container instead of putting them to the background.
If you need help with that, you can give us temporary admin access to your website in the private content box below.
Best regards,
Victoria