How can i change container size of collapsible content in dawn theme?

Store Design

Topic summary

A user seeks to reduce the width of collapsible content containers on their FAQ page in the Dawn theme, wanting a narrower, more centered layout.

Solution Provided:

  • Add custom CSS to base.css or a custom CSS file
  • Key code targets .collapsible-content__wrapper with:
    • max-width: 800px
    • width: 100%
    • margin: 0 auto (for centering)
    • Additional padding and border-radius adjustments
  • Media query included for responsive behavior (min-width: 750px)

Outcome:
The solution successfully resolved the issue. The user confirmed it worked as intended and expressed interest in additional customization help for a slider design, which the responder offered to assist with via direct email consultation.

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

I want to change the size of the container so that it is not so wide, i will attach pictures to what i wanna do.

if someone can please help

This is what mine looks like:

Screenshot 2024-11-06 at 2.32.59 PM.png
Screenshot 2024-11-06 at 2.32.59 PM.png2844Ă—1082 135 KB

And this is how i want it to look like!

Screenshot 2024-11-06 at 2.32.29 PM.png
Screenshot 2024-11-06 at 2.32.29 PM.png2844Ă—1122 129 KB

2

@Motoblox Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

3

Hey @Motoblox

Share your Store URL and Password if enabled.

Best Regards,

Moeed

4

https://motoblox.com/pages/faqs this the page i want to modify the containers for collapsible content are too wide i want to make them smaller

5

https://motoblox.com/pages/faqs

1 Like
6

Hello! @Motoblox Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open it instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .collapsible-content__wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 40px;
    border-radius: 20px;
}

@media screen and (min-width: 750px) {
    body .collapsible-section-layout {
        padding-bottom: 4rem !important;
        padding-top: 4rem !important;
    }
}

HuptechWeb_0-1730885662906.png
HuptechWeb_0-1730885662906.png1095Ă—872 14.3 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

1 Like
7

That is exactly what i wanted to do thank you so much! There are a few more things i wanted to know if you can help ?

https://community.shopify.com/c/shopify-design/theme-customisation/m-p/2832434#M741346

this is the thing i wanted to know, still thanks a lot for your help appreciate you!

1 Like
8

@Motoblox I reviewed the section you shared, and I see the custom slider design you’re aiming for. I’d be happy to help you design and develop a tailored slider solution that aligns with your vision. We can work together to create a visually engaging and user-friendly slider, ensuring it seamlessly integrates with your theme and meets any specific functionality you require.

Please feel free to reach out to me at the below Email so we can discuss your requirements in more detail and bring your ideas to life.