Edit padding on custom section

Store Design
, , ,

Topic summary

Goal: Make a custom two‑column collapsible section in the Dawn theme match the site’s standard content width on large screens and reduce the gap between columns.

Key steps and suggestions:

  • Store URL shared for review: https://astralresorcez.com/pages/products-services.
  • CSS fix proposed: in base.css/theme.css, use media queries to set .collapsible-content__wrapper to max-width: var(–page-width) and margin: auto (≥989px), plus horizontal padding (≥750px) to align with the site container.
  • When the section remained full-width, a follow-up advised adding !important to the max-width rule to ensure it overrides other styles, with a screenshot showing the expected constrained width.
  • An additional suggestion targeted a specific template/section class to adjust padding at ≥930px, which refines spacing but does not itself constrain width.

Notes:

  • Multiple screenshots were provided to illustrate expected results and current behavior.
  • The CSS variable --page-width corresponds to the theme’s standard content width.

Status: Unresolved/ongoing. The user hasn’t confirmed a fix. Next checks likely include verifying the correct selector, placement in the right CSS file, and that the max-width rule takes precedence.

Summarized with AI on December 13. AI used: gpt-5.
1

Screenshot 2024-12-04 at 14.16.50.png
Screenshot 2024-12-04 at 14.16.50.png2940×1058 160 KB

Hi All, please help me to make the collapsable component the same width as the rest of my website (dawn theme).

I have made it in 2 columns through code but now it stretches the whole width of my website, when viewing on a larger screen.

I also don’t want a huge gap in between the two columns..

Please look at the picture for reference.

Would appreciate any help.

1 Like
2

Hi @astralresorcez , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

1 Like
3

Hi @astralresorcez

PLease, share your store URL. Thanks!

1 Like
4

Hi @Made4uo-Ribe @steve_michael2

Here is URL:

https://astralresorcez.com/pages/products-services

5

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media (min-width: 989px) {
    .collapsible-content__wrapper {
    max-width: var(--page-width);
    margin: auto;
}
}
@media (min-width: 750px) {
    .collapsible-content__wrapper {
        padding: 0 3.5rem;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

6

Hi, thanks for this however it’s still spanning the entire width of screen when full screen. Do you have any other suggestions?

Thanks!

7

Did you try to add the code? This is what it look like on my end.

Made4uoRibe_0-1733401190469.png
Made4uoRibe_0-1733401190469.png1867×766 227 KB

I added the default max-width which is for all the max-width in your all your section. If it not working add the !important.

@media (min-width: 989px) {
    .collapsible-content__wrapper {
    max-width: var(--page-width) !important;
    margin: auto;
}
}
@media (min-width: 750px) {
    .collapsible-content__wrapper {
        padding: 0 3.5rem;
}
}

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

8

Hi @astralresorcez

  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.
@media(min-width:930px){
.collapsible-content__wrapper.section-template--16393414901859__collapsible_content_VY3JhX-padding {
    padding: 40px 36px;
}
}

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

If you are happy with my help, you can help me buy a COFFEE

Thanks!