A user working with Shopify’s Taste theme encountered an issue where collapsible content sections (FAQ blocks) displayed at full screen width instead of matching the fixed-width layout shown in the theme demo.
Problem Details:
Solution Provided:
A CSS fix was shared to add to the base.css file:
.collapsible-content-wrapper-narrow { max-width: 60.4rem !important; }
The width value can be adjusted as needed.
Resolution:
The user confirmed the CSS solution successfully resolved the width issue. An alternative suggestion to adjust the section’s Layout settings in Theme Customization was also mentioned but not ultimately needed.
In the Taste theme, when I create collapsable content (titled “frequently asked questions” in the image below), it always defaults to full screen width (see image below).
However, in the demo Taste Theme, the collapsable content is not full width (see image below). How can I make my content also not full width?
@rayizam - can you please share this page link? it will need css
HI @rayizam
Could you share your store link to check?
Hi @suyash1 - link to the site is: https://esprovivo.com/products/owls-howl and the password is: ‘zudrem’.
Hi @Dan-From-Ryviu - link to the site is: https://esprovivo.com/products/owls-howl and the password is: ‘zudrem’.
It is the same width as Taste theme demo
No. When I full screen, the box for the black border around frequently asked questions on my site extends the full with of the page. However, in the taste demo, it appears to have a fixed maximum width (i.e., when you full screen, the black border does not extend the full width of the page - and is not edge to edge).
In the taste demo page: https://theme-taste-demo.myshopify.com/products/copy-of-wing-man , you can see how the frequently asked questions border aligns with the border of the image.
They are fixed width on my side
Also, if you want to have border same as demo site then you can change setting in your Online store > Themes > Customize > Theme settings > Content containers
@rayizam - please add this css to the very end of your base.css file and check, adjust the number as per your need
.collapsible-content-wrapper-narrow{max-width: 60.4rem !important;}
That worked. Thank you!
Happy I could help!
