This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Remove gutter between columns on mobile

Resolved 7 replies customizationpluginplugin-page-builder
jdaviswebdesign
6 years ago · Last reply by SiteOrigin 6 years ago

I apologize if this has been asked before–I searched the support forum but could not find this question.

When two columns collapse on mobile, the column gutter creates a gap between the end of column 1 and the beginning of column 2. I want to remove this gap so the content appears seamless when stacked. Can someone point me in the right direction? Thanks.

Jennifer

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. SiteOrigin 6 years, 7 months ago

    Hi Jennifer

    Thanks for posting.

    Please, try the advice listed here: Page: CSS Snippets and let us know how it goes.

  2. jdaviswebdesign 6 years, 7 months ago

    Thank you, but the CSS Snippets page only shows a snippet for changing cell bottom-margin on mobile and this isn’t a cell bottom-margin problem but rather the gutter that is automatically placed between cells. When the cells stack on mobile, that gutter space is still there (now vertical between the two cells). I can’t find where in the Page Builder styles to remove the gutter space on mobile.

  3. SiteOrigin 6 years, 7 months ago

    Thanks for the update. As far as I’m aware, the rules mentioned here Page: CSS Snippets are what you’re after. The wording of that page perhaps needs to be re-worked. Please, send a link to the page concerned and I’ll take a look.

  4. jdaviswebdesign 6 years, 7 months ago

    Thank you, again. Here is a page from my site where I have two columns and a 50px gutter between the cells.
    https://www.jdaviswebdesign.com/design-services/

    When the columns stack on smaller devices, there is a large vertical gap between the end of the first column and the start of the second column. I did try that CSS snippet, but it did not change the gap.

  5. SiteOrigin 6 years, 7 months ago

    Thanks for the link. On mobile, the gap after the WordPress.com paragraph is caused by an empty paragraph. Edit the widget concerned and check for extra spacing at the bottom.

  6. jdaviswebdesign 6 years, 7 months ago

    Thank you for spotting that! I am so glad this is fixed. It was driving me crazy. :)

  7. SiteOrigin 6 years, 7 months ago

    Super :) Glad to hear that helped. All the best with your site and upcoming projects.

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.

Have a different question or issue?

Start New Thread