Home>Support>Page Builder Row Background Images not resizing on Mobile

Page Builder Row Background Images not resizing on Mobile

Hi my background images set in my page builder rows are not resizing on mobile devices. When they load they are still large and out of proportion and cannot be seen properly. I have responsive layout enabled in settings. Can you please give me some CSS code to enable this to happen please

my website is https://www.tabitha-yoga.co.uk

many thanks
jloindubai

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 months, 15 days ago Andrew Misplon Hi, I Work Here

    Hi Jackie

    Thanks for posting your query.

    Are you specifically asking about the “WHAT MY STUDENTS SAY ABOUT YOGA AND PILATES CLASSES WITH TABITHA YOGA” row on the home page? Here is how that row looks when I took a look:

    https://imgur.com/a/l02oM7t

    That looks ok on my end.

    The background image is set to cover. Here is what that value does:

    Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

    The reason cover has to be used is the contents of the row remain the same on mobile. If the image were to be loaded at 100% the width, the contents of the row would have to be made much smaller to accommodate. I’ve uploaded a second screenshot at the following link to show what 100% width would look like: https://imgur.com/a/l02oM7t.

    Not all images work well with cover. If a specific person or object has to be in focus, that’s usually where the challenge lies.

    This specific row we’re looking at has styling added and managed by your theme as part of its Page Builder integration. Just thought I’d mention that for interest’s sake. The theme is setting the background image display conditions.

  2. 3 months, 12 days ago Jackie Lowery

    Hi thanks for replying – no I am not talking about “WHAT MY STUDENTS SAY ABOUT YOGA AND PILATES CLASSES WITH TABITHA YOGA”

    I am talking about 4 pages that are part of my website. I have built them using Site Origins Page Builder. Each has a selection of rows with widgets. The following pages ( About Me, Book A Class, Tabitha Yoga On Demand, Yoga & Pilates Classes In Derbyshire) all have the first row of the page set with the Site Origin Headline widget and in the design area of each row I have set a background image. It is these images that are not re-sizing on mobile devices.
    For example this is my page on desktop
    https://tabitha-yoga.co.uk/tabitha-yoga-pilates-classes-derbyshire/

    this is my page on mobile
    https://imgur.com/a/Wt7iIca

    this is how I have loaded the photo in the row
    https://imgur.com/a/hholKqn

    this is how my homepage looks on mobile with the top image set in my theme
    https://imgur.com/a/zErmkKa

    As you can see there is no issue with the image on the homepage but there is with all the images set on the other pages

    I really appreciate any assistance you can give me
    regards

  3. 3 months, 12 days ago Andrew Misplon Hi, I Work Here

    Thanks for the update.

    I had a look at the Sydney documentation to see if the same theme hero slider is available for other pages, it doesn’t seem like it, not without Customization.

    You could try the SiteOrigin Hero widget, you can set a background image, add text, add a normal height and a mobile height but the image will still be sized using background-size: cover, it won’t use background-size: 100% as it does on your home page. The SiteOrigin Slider widget does offer background-size: 100% but doesn’t support a text overlay. If you don’t mind giving a slider plugin a tryhttps://smartslider3.com/ free version would offer the desired result.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More