separator lines between sections

Store Design
, ,

Topic summary

A user successfully added separator lines under images and between homepage collections, but needs help placing lines above and below their FAQ (collapsible content) section.

Solutions Provided:

  • DaisyVo suggested adding CSS targeting .collapsible-content__wrapper with top and bottom borders to the Custom CSS field
  • websensepro recommended editing theme.css/base.css files directly, using a section-specific ID selector with borders and padding
  • topnewyork proposed inserting CSS code in the theme.liquid file before the </head> tag

Current Status:

The user reported one solution didn’t work but thanked another responder, suggesting partial success. The discussion remains open as it’s unclear which approach ultimately resolved the issue. All solutions involve CSS customization but differ in implementation method and selector specificity.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

i have managed to put separator line under picture and between collection on homepage. I am trying to place over and below my Faq (collapsible content), how do i do this?

silenceclothing_0-1736777150548.png
silenceclothing_0-1736777150548.png1904×366 87.7 KB

silenceclothing_1-1736777172465.png
silenceclothing_1-1736777172465.png1868×557 32.4 KB

silenceclothing_2-1736777186584.png
silenceclothing_2-1736777186584.png1894×573 9.89 KB

2

@silenceclothing Can you please share this page link?

3

Hi @silenceclothing

You can add this code below to Custom CSS field I mentioned earlier:

.collapsible-content__wrapper {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

image (66).png
image (66).png1906×675 65.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

@silenceclothing

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
section#shopify-section-template--18239296241861__collapsible_content_7f7XHC {
    border-top: 2px solid white !important;
    border-bottom: 2px solid white !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
}

websensepro_0-1736778351359.png
websensepro_0-1736778351359.png1364×537 18.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

Hi @silenceclothing

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Result:

image.png
image.png768×282 3.34 KB

If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

6

this did not work

7

thanks!