Remove blank space between home page sections (Symmetry)

Hello,

I am trying to remove or reduce blank spaces between sections on my home page. I am using the Symmetry theme. It would be great to be able to remove padding to all sections instead of going one by one.

@Forma-LA

Please share your store url.

Hi @Forma-LA ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/style.css->paste below code at the bottom of the file:

.fully-spaced-row, .fully-spaced-row--small,
.collection-slider-row,
.strongly-spaced-row, .fully-spaced-row--medium{
    margin-top: 0;
    margin-bottom: 0;
}

I hope it would help you
Best regards,

Richard | PageFly

To remove or reduce the blank spaces between sections on your home page in the Symmetry theme, you can modify the theme’s CSS file. Here are some steps to achieve that:

  1. Go to the “Online Store” > “Themes” section in your Shopify admin panel.
  2. Find the “Actions” drop-down button for the Symmetry theme, and click on “Edit Code”.
  3. In the “Assets” folder, find the “theme.scss.liquid” file and click on it to open it.
  4. Scroll down to the bottom of the file, and add the following code:
.section { padding: 0; margin: 0; } 

This code will remove the padding and margin from all sections in the theme. If you want to reduce the spacing between sections, you can adjust the values for padding and margin to suit your needs.

  1. Save the file, and refresh your website to see the changes.

Note: Modifying the theme’s code may affect the design and layout of your website. Make sure to test the changes on different devices to ensure that everything looks as expected. Additionally, it’s recommended to create a backup of your theme before making any changes to the code.