Remove padding between header and collapsible conent

How can I remove the space between the heading and the collapsable content for both mobile and desktop on Dawn theme.

1 Like

Hey @peakclo

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Hello @peakclo
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

This worked great for desktop view but mobile view is still the same.

www.peakclo.com

1 Like
  • Here is the solution for you @peakclo
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.collapsible-row-layout .accordion {
    margin-top: 0 !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hi @BSS-TekLabs ,

This sadly did not work. I followed your exact steps

1 Like

Hey @peakclo

Keep the previous code and add this new code above in the end of theme.liquid file

.collapsible-row-layout .accordion summary {
    padding: 0 !important;
}
h2.collapsible-content__heading.inline-richtext.h2 {
    margin: 0 !important;
}
.collapsible-row-layout .accordion {
    margin-top: 1rem !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

You are missing a } on this line.