How can I fix CSS spacing issues on my custom content sections?

Store Design

Topic summary

Spacing issues between custom content sections on a Shopify homepage. The merchant needed extra space: (1) between a “FREE hair charm with every hair braid” custom section and a video below it, and (2) between the Judge.me reviews section, the Instagram section, and the footer.

Initial CSS attempts didn’t work:

  • .custom-content-section .contain-site-width { … }
  • .sw-instagram-container .contain-site-width { padding-top/bottom … }

A helper reviewed the site and found the provided CSS selectors didn’t match any elements in the theme (i.e., selectors not found), so the rules never applied. They advised adding the correct CSS into theme.liquid, placing it above the closing tag (Online Store > Themes > Edit code > theme.liquid). Screenshots were provided to illustrate the missing selectors.

Outcome: After applying the guidance, the merchant confirmed the spacing was fixed. The issue is resolved; no further action requested.

Summarized with AI on January 21. AI used: gpt-5.
1

Hi

With regards to the website home page of www.larzy.com.au I am just fixing up spacing between sections.

I have managed to fix spacing in most sections but I am still needing to do the following and then I am done:

  1. Space between the FREE hair charm with every hair braid section and the video below it. Both are custom content sections. I was trying to put in the below code but it didn’t work:

.custom-content-section .contain-site-width { padding-top: 10px; padding-bottom: 200px;}

  1. Trying to put in space between the Judge me section and the Instagram section (and also the footer below the Instagram section). I tried to fix this by changing the Instagram spacing by using the following code but it isn’t working:

.sw-instagram-container .contain-site-width { padding-top: 80px; padding-bottom: 60px; }

I’m learning which I enjoy, so hoping someone may be able to help with these final two parts.

Thanks,

Sarah

2

Hi @larzyau

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

I checked and found that all your css selector is not found, that’s why all the code is not working.

PageFlyNoah_0-1692255626324.png
PageFlyNoah_0-1692255626324.png1370×931 286 KB

PageFlyNoah_1-1692255641322.png
PageFlyNoah_1-1692255641322.png1370×931 179 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

1 Like
3

It was perfect and worked. Thanks again.