Make only one multicolumn section full width

Store Design
,

Topic summary

A user needed to make a specific multicolumn section full-width on their Shopify store to display larger images and improve aesthetics. Their initial CSS attempt targeting the section ID didn’t work.

Solution provided:
Multiple respondents offered similar CSS fixes, all involving adding code to the base.css file. The working solution targets the .page-width class within the specific section and sets max-width: 100%.

Implementation steps:

  • Navigate to Edit code in Shopify
  • Open base.css file
  • Add the provided CSS targeting the section’s .page-width class at the end of the file

Status: Resolved - the user confirmed the solution works successfully.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello !

I would like to make this multicolumn section full widht. In order to make the images bigger and the multicolumn more aesthetic with the design of the page.

HT23_0-1737295850825.png
HT23_0-1737295850825.png2880×924 259 KB

https://quatreausoir.fr/pages/personnalisation

I tried .section#shopify-section-template–23166564598025__multicolumn_6GqKRc {
width: 100%;
}

but it makes nothing.

Can someone help me please ?

2

Hey @HT23 here is solution.

Paste this code at the last of base.css file

.page-width.section-template--23166564598025__multicolumn_6GqKRc-padding.isolate.scroll-trigger.animate--slide-in {
    max-width: 100% !important;
}
3

@HT23 add this and check

#shopify-section-template--23166564598025__multicolumn_6GqKRc .page-width{max-width:100%;}
1 Like
4

Hi HT23

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
.page-width.section-template--23166564598025__multicolumn_6GqKRc-padding.isolate.scroll-trigger.animate--slide-in {
    max-width: 100%;
}

Result:

EstherBui_0-1737296485357.png
EstherBui_0-1737296485357.png1061×554 381 KB

Best,
Esther

5

Oh it works ! Thank you so much !