I’ve actually run into both of these issues before when adding new blocks — especially with FAQ or Collection sections that don’t auto-adjust to match your site’s width (like 1300px). Shopify themes sometimes limit the container width inside the section file itself, so no matter what CSS you add, it won’t take effect globally.
Here’s a quick fix to try:
.shopify-section--faq,
.shopify-section--collections {
max-width: 1300px !important;
margin: 0 auto !important;
width: 100% !important;
}
If that doesn’t solve it, the section’s Liquid file might be locking the layout width in-line (inside something like page-width or content-container). In that case, you’ll need a small tweak inside your section file, which I can guide you through easily.
Thank you very much, but it doesn’t work…
So, I appraciat a lot if you can explain the other solution !
Thank you very much !
Why not allow me save you the hassle of going through the inspection Debugging tools, to get this done. I come in and solve it asap
Are you Ope to that ?
Oh sorry, I dont’ understand. You want to have access to the code to edit ?
If you can explain me, I prefer to be honest
Sections like the FAQ or Collections block usually sit inside their own container, so simply adding a general .page‑width { max‑width: 1300px; } rule won’t affect them. To make a block span your site’s 1300 px width you need to target the section wrapper for that block and override its container.
If you inspect the page in your browser you will see each section has its own id (e.g. #shopify‑section‑faq or #shopify‑section‑collections). Inside that wrapper is a .page‑width div that constrains the content. You can override that like this:
#shopify-section--faq .page-width,
#shopify-section--collections .page-width {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
That CSS tells the FAQ and Collections sections to expand to your full site width. Add it to your theme’s custom CSS file (e.g. assets/theme.css.liquid) or the Custom CSS field in your theme editor. Use !important on the max-width property if another rule is overriding it.
For editing only the header of the Collections block, target the heading element within the section. Depending on the block you purchased it might be .collage__title, .section-heading, or similar. For example:
#shopify-section--collections .section-heading {
font-size: 2rem;
text-align: center;
/* any other styling you need */
}
Swap section-heading for the actual class used by your block. You can find it by inspecting the heading in your browser’s developer tools. By scoping the selector to the section id, the changes only apply to that block and won’t affect other collection lists.
If you’re comfortable editing code you can also open the section file (e.g. sections/faq.liquid or sections/collection-block.liquid) and adjust the markup or remove the container div altogether, but adding a few targeted CSS overrides is usually enough.
Dropping a whole wall of process here would be tiring, I’ll need to inspect it so I figure the exact selectors and all
Thank you for all the details, but when I inspecting the page, I can’t find the id of section.
Maybe : section-template–24620378325315__ss_faq_9_LFxM4U faq-template–24620378325315__ss_faq_9_LFxM4U ??
But when I try to use this id, it doesn’t work…
I try so many options, no one works…
I understand. Thank you very much !!
You’ve tried many your way and nothing has worked. Wouldn’t you give another a chance?
Yes of course ! If you have issue with pleasure. I continue to search by myself and I send email to coder of these section.