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

Home Forums Support Full width picture on home page not showing correctly on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #314294
    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

    GP Premium 1.2.96
    #314404
    Leo
    Staff
    Customer Support

    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.

    #315267
    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

    #315443
    Leo
    Staff
    Customer Support

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.