How to adjust padding between 2 sections

Shopify Discussion
,

Topic summary

A user seeks to increase spacing between two sections on their Shopify store, specifically between an icon-with-text section and a review slider.

Solutions Provided:

  • Theme Editor approach: Adjust padding directly through Shopify’s built-in theme customization tools before resorting to code modifications.

  • CSS method (marked as solution): Add custom CSS to the base.css file targeting the .icon-with-text class with padding-bottom: 20px !important;. A mobile-only variant using media queries is also provided.

  • Inline HTML styling: Insert style="padding-top: XXpx;" or style="padding-bottom: XXpx;" directly in HTML elements.

  • theme.liquid modification: Place custom CSS code before the </body> tag in the theme.liquid file.

Resolution: The issue was successfully resolved using one of the CSS-based solutions. The discussion includes code snippets and before/after screenshots demonstrating the spacing adjustment.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, how can I increase the space between these 2 sections?

1.png
1.png392Ă—749 225 KB

1 Like
2

Hi,

Hope this will work

  • Try using Theme Editor first to adjust padding.

  • If that doesn’t work, use Edit Code option.

  • Add style=“padding-top: XXpx;” or style=“padding-bottom: XXpx;” in HTML.

padding code example
1 Like
3

In order to add the space between icon-with-text and review slider you need to paste the following code in the end of base.css file.

Here is how you can find base.css file.

Go to Shopify Admin >> Online Store >> themes >> Click on three dots and then Edit Code >> In the Edit Code search for base.css. >> Go to the end of base.css file and paste the following code.

.icon-with-text.icon-with-text--horizontal.list-unstyled {
    padding-bottom: 20px !important;
}

If you want the spacing just for the mobile only then you need to paste this code.

@media only screen and (max-width: 767px) {
.icon-with-text.icon-with-text--horizontal.list-unstyled {
    padding-bottom: 20px !important;
}
}

Results:

TheScriptFlow_0-1749534341800.png
TheScriptFlow_0-1749534341800.png565Ă—564 40.4 KB

1 Like
4

Mustafa_Ali_0-1749535779957.png
Mustafa_Ali_0-1749535779957.png353Ă—248 23.8 KB

hey @NikosBat dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

1 Like
5

Hey @NikosBat Nice seeing you here again, check out the reply marked as a solution here and let me know if it’s of any help https://community.shopify.com/c/shopify-design/how-can-i-add-space-between-sections-on-my-homepage/m-p/1000313

1 Like
6

Thank you very much that has solved my problem!

7

Thanks four your help!

8

Thanks for your help!