Change Proportions Of Columns In "Multicolumn" Section

Store Design

Topic summary

A user wants to customize a Shopify multicolumn section to display three columns in a 50:25:25 ratio instead of the default 33:33:33 equal distribution.

Solution Provided:

  • Add CSS code to base.css or theme.css using CSS Grid
  • Initial code targets a specific section ID (ul#Slider-template--16325952995510__multicolumn_LHtMA4)
  • Uses grid-template-columns: 50fr 25fr 25fr to achieve the desired proportions

Follow-up Issue:
The user notes that Shopify generates new unique IDs when sections are removed and re-added, making the ID-specific solution impractical.

Updated Solution:

  • Replace the specific ID selector with a class selector (.multicolumn ul)
  • This applies the custom proportions to all multicolumn sections site-wide
  • Includes media query adjustments for responsive behavior

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

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

Hello,

How can I change the proportions of a 3 columns in “multicolumn” section to 50:25:25 (as the red blocks) instead of 33:33:33?

Please check my url: https://189ee3-2.myshopify.com/

Thank you,

Screenshot1.png
Screenshot1.png1280×531 32.6 KB

2

Add this code in your base.css or theme.css file:

ul#Slider-template--16325952995510__multicolumn_LHtMA4 {
  display: grid !important;
  grid-template-columns: 50fr 25fr 25fr;
}

.multicolumn-list__item.grid__item {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 989px) {
  ul#Slider-template--16325952995510__multicolumn_LHtMA4 {
    grid-template-columns: auto !Important;
  }
}

Result:

99.PNG
99.PNG1165×376 30.8 KB

1 Like
3

Thank you :folded_hands: :grinning_face:

1 Like
4

How can I replace ul#Slider-template–16325952995510__multicolumn_LHtMA4 with classname? Because whenever I remove the section and add again it will create a new id?

5

If you want, replace ‘ul#Slider-template–16325952995510__multicolumn_LHtMA4’ with ‘.multicolumn ul’.

Shopify generates a unique identifier for each section of your website. I did it this way to only target that specific identifier because I assumed you wanted the code unchanged. Now, this updated code affects all multicolumn sections:

.multicolumn ul {
  display: grid !important;
  grid-template-columns: 50fr 25fr 25fr;
}

.multicolumn-list__item.grid__item {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 989px) {
  .multicolumn ul {
    grid-template-columns: auto !Important;
  }
}
1 Like
6

Thank you!!!

1 Like