Removing Extra Spaces Appeared Underneath in Mobile View

  • Resolved Henry H.

    (@sirhenryhu)


    6 years, 2 months ago

    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 Support 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;
	}
}
    Thread Starter Henry H.

    (@sirhenryhu)

    Hi Andrew,

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

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

    Plugin Support 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.

    Thread Starter Henry H.

    (@sirhenryhu)

    Thank you for answering plus the useful reference.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Removing Extra Spaces Appeared Underneath in Mobile View’ is closed to new replies.

Tags