[Support request] Full width picture on home page not showing correctly on mobile

[Andrew]

Hi I have a full width picture on my website (staging.kewroaddental.co.uk) but when I check the mobile appearance only a small, cental area of the picture appears. I tried putting the picture in a section, added a custom class custom-mobile-bg and then added the css as below using simple css plugin but it has not worked:

@media (max-width: 768px) {
.custom-mobile-bg {
background-image: url(http://staging.kewroaddental.co.uk/wp-content/uploads/2017/05/Waiting-room-page-001.jpg) !important;
}
}

can I get some help to improve the appearance of my site in the mobile format

[Leo]

Hi Andrew,

Unfortunately background images are not responsive by nature.

I’m not familiar with BB but maybe you could try to insert the picture using the img tag?
Then it should be responsive like the two images at the bottom of the page.

If not you might have to ask BB for help since the content is all from the page builder.

You can also achieve the same look without a page builder and just use our Sections add-on:
https://docs.generatepress.com/article/sections-overview/

Hope this helps.

[Andrew]

Hi Leo

Thanks for the reply, sorry for taking a while to reply

I actually did insert the image using the sections add on and not BB but I still have the same problem. you can see in my previous email what I did. (this was recommended by Tom to another user).

Was the css I used not correct for my website

[Leo]

Looks like you switched the background image to a slider with BB and everything is working now?

[Author]

Posts