Support » Plugin: Page Builder by SiteOrigin » Removing Extra Spaces Appeared Underneath in Mobile View

  • Resolved HeNRy Hu

    (@sirhenryhu)



    Hi all.

    The page attached has the row that has 4 sections using SiteOrigin Hero at the bottom.

    When you look at them in desktop view, they are in the layout supposed to be. However, extra spaces appear under each element when the page is in Mobile view.

    I’ve run a bit switch testing/making sure on:

    1. There’s no space appearing if the heroes set in the same column.
    2. Values of Gutter and Padding are all set to 0.

    I am assuming the cause of this situation should be one attribute inside the container(row), but I just couldn’t find it. Any idea/suggestion will be appreciated.

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

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

    (@misplon)

    Hi Henry

    Thanks for posting. Unfortunately, at the moment there isn’t a setting to remove cell bottom margin for mobile. Please, try adding the following to Customize > Additional CSS or the Custom CSS location of your choice:

    /* Page Builder by SiteOrigin - Remove cell bottom margin on mobile */
    @media (max-width: 768px) {
    	.panel-grid-cell {
    		margin-bottom: 0 !important;
    	}
    }

    Hi Andrew,

    Thank you so much for answering the thread. It works perfectly as supposed.

    May I ask what “max-width” stands for?

    Plugin Author Andrew Misplon

    (@misplon)

    Super, glad that helped 🙂

    It means screen resolutions up to 768px.

    https://www.w3schools.com/css/css3_mediaqueries.asp

    All the best with your site.

    Thank you for answering plus the useful reference.

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