Home>Support>Remove gutter between columns on mobile

Remove gutter between columns on mobile

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 13 days ago SiteOrigin

    Hi Jennifer

    Thanks for posting.

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

  2. 6 years, 13 days ago jdaviswebdesign

    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. 6 years, 13 days ago SiteOrigin

    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. 6 years, 13 days ago jdaviswebdesign

    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. 6 years, 12 days ago SiteOrigin

    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. 6 years, 12 days ago jdaviswebdesign

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

  7. 6 years, 12 days ago SiteOrigin

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More