How to make collapsable content full width on landing page - Dawn Theme

[JustInCase-de]

Hello,

I am using the dawn theme and just added collapsable content (About us box) on my store.

I would like to make it full width and hope somebody can provide me with corresponding code.

Is it also possible to change the text and icon color “about us”, to match the logo color, blue ?

This is my store url: Justincase-de.com

Kind regards

[Ujjaval]

@JustInCase-de
Put below css into base.css file

.collapsible-content__wrapper  .collapsible-content-wrapper-narrow {
   width: 100% !important;
   max-width: 100% !important;
}

.accordion .icon-accordion {
    fill: blue !important;
}

[shubhamSharma]

hello @JustInCase-de

1. Go to your Store > Theme > click to edit code.
2. find this file " base.css" and open.
3. Paste the code at the end of the file.

.collapsible-content__wrapper  .collapsible-content-wrapper-narrow {
    max-width: 100%;
    width:100%;
}
.accordion summary svg path {
    fill: #3076fa;
}
h3.accordion__title.h4 {
    color: #3076fa;
}

this idea helps you

[harivishwakarma]

@JustInCase-de

Hallo [email removed]

You can add code by following these steps to change

1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom

.collapsible-content-wrapper-narrow {
max-width: 100% !important;
}

summary#Summary-template--17073459167496__1dcf593d-328a-41c3-982b-08b79970424d-1673948185f5f701b8-0-template--17073459167496__1dcf593d-328a-41c3-982b-08b79970424d {
justify-content: center !important;
}
h3.accordion__title.h4 {
color: #6169fc !important;
}
svg.icon.icon-accordion.color-foreground-text {
fill: #6169fc !important;
}

If you require any further information, feel free to contact me.

Best regards,

[JustInCase-de]

That worked perfectly!

Thank you very much and kind regards.

JustInCase.

[harivishwakarma]

@JustInCase-de Welcome

please accept solution…

Your kind words have just made my day .

[WebDeskSolution]

Hello @JustInCase-de

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file base.css

Step 3: Paste the below CSS at bottom of the file → Save

.collapsible-content-wrapper-narrow {
  max-width: 95%;
}
h3.accordion__title.h4 {
  color: #5373ff;
}
svg.icon.icon-accordion.color-foreground-text {
  fill: #5373ff;
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[EliskaM]

Hello there, I tried this code and does not work for me I don’t know if I made some mistake or something.
I just need the image to be more wider (as on the picture). Would you please help me with that?
Thank you very much in advance