Adjust width of collapsible content section (for both desktop and mobile views)

[rencafenyc]

My goal is to expand my collapsible content sections to be in line with the rest of the page content. I attached an image explaining how I envision it to look:

The default collapsible content sections are all in the middle of the page screen and I’m having trouble increasing the width. I added the following code to the bottom of my assets/base.css file which worked for desktop:

.collapsible-content__wrapper .collapsible-content-wrapper-narrow { width: 88%; max-width: 88%; }

However, the issue with this code is that it only looks correct on desktop. On mobile, the entire right side of the collapsible content section with the down arrows can’t be seen because it goes beyond the right side of the mobile screen.

Any help or guidance on this is super appreciated, thank you!

Website: https://rencafenyc.com/pages/cafe

[devcoders]

Hello @rencafenyc

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.collapsible-content-wrapper-narrow {
padding: 0 5rem!important;
}

[rencafenyc]

For anyone with the same issue, this is the code added to the bottom of the assets/base.css file which solved the issue:

.collapsible-content__wrapper .collapsible-content-wrapper-narrow {
width: 99%;
min-width: 99%;
max-width: 100%;
margin: 0px;
padding-right: 108px;
padding-left: 108px;
}
@media (max-width: 767px) {
.collapsible-content__wrapper .collapsible-content-wrapper-narrow {
width: 100%;
min-width: 100%;
max-width: 100%;
margin: 0px;
padding-right: 27px;
padding-left: 27px;
}
}