Support » Plugin: Page Builder by SiteOrigin » Problems with mobile responsiveness

  • Resolved pbwpwork



    I am having a problem using siteorgin to design a page that is truly mobile responsive. I have produced two versions of the same page to highlight my point. I have hoping somebody is just able to point out something that I have missed.

    Version 1:

    Created: Using just a single row with a text wrap round the top left image
    Pros: Looks great on a PC and Ipad
    Cons: Mobile – text is squeezed up on the right of the image and looks very bad (is not resizing the image)

    Version 2:
    Created: Using two rows, first row – image (col 1) text (col2), second row – text (1 col only)
    Pros: Looks great on a mobile (it splits the image and text on two separate rows)
    Cons: on a PC and Ipad, it put a big gap between the rows that looks very odd.

    How can I get the best of both worlds? Probably something really obvious, but a bit stumped. Is there a setting to reduce the gap between rows? I have tried to give some negative padding on the top of the second row (to push it up) with no effect.



    • This topic was modified 2 months, 1 week ago by pbwpwork.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Andrew Misplon


    Hi Paul

    Thanks for reaching out.

    In the first layout, your theme handles the alignment of images and whether or not to clear those alignments on mobile. If you replicate the first layout in the Classic Editor without Page Builder, you should find the same result. You could remove the theme’s image alignment and center for mobile resolutions using Custom CSS. That’s unfortunately, beyond our free support scope.

    In the second layout, you could edit the first row and open the Layout section on the right. Try setting the Row Bottom Margin to 0.

    Hope that helps.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.