Incease spacing between sections (baseline theme)

Store Design
, , , ,
1

Hello,

I am simply looking to increase spacing between different sections. Could someone help me out with this?
I’m kinda surprised I can’t find such setting in the editor?

1 Like
2

Hi @TheAnyTony

Do you mean like this?

Check the white gap.

Ribe_Dagandara_0-1693242470800.png
Ribe_Dagandara_0-1693242470800.png1344×427 51.2 KB

if it is check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
ul.grid.grid-cols-2.lg\:grid-cols-12.gap-gutter.bg-border {
    row-gap: 20px;
    background: white;
}
  • And Save.

I hoe it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi, Thanks for posting. I’m looking to add spacing between section outside the collection. For example between the collection and blogs.

A workaround I made was to add empty fields of text now. It kinda works for now.

However if your code could be applied for any section that’s better, as it specifies specific distance in px.

1 Like
4

Try this one.

It only give space on ths area not all section.

Same Instruction.

div#shopify-section-template--19255897227612__11ff2dd3-c724-422b-93c5-d4bed72e259b {
    padding-bottom: 50px;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Thank you :slightly_smiling_face: Much appreciated.

Could you perhaps look into another question I have? I’m kind of stuck here.

https://community.shopify.com/c/shopify-design/sticky-header-with-transparent-background-but-into-solid-color/td-p/2199575