Make multicolumns span full width regardless of amount of columns - Sense

Store Design
,

Topic summary

A user working with Shopify’s Sense theme encountered an issue where multi-column gallery images wouldn’t span the full page width or align properly on both sides, despite setting center alignment.

Solutions provided:

  • Quick fix (Custom CSS): Add CSS to the multi-column section targeting .multicolumn-list__item.center with justify-content: space-between and .multicolumn-list__item.center .media--adapt img with width: 100%

  • Theme file edit: Navigate to section-multicolumn.css (line 224) and remove the column-gap: 0 !important rule, then modify line 32 to set .multicolumn-list__item.center .media--adapt width to auto

Resolution: The original poster confirmed the solution worked perfectly, resolving the alignment and spacing issues.

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

Hello community,

I need assistance with aligning images on the Sense Theme. I’m using multi-columns to set a custom layout for my gallery images and have set the alignment to “centre.” However, the images are only aligned with the left side of the page and not the right. While I managed to make a single image span the whole page, I’m struggling to figure out how to evenly space the images across the page and align them on both sides. Any help would be greatly appreciated!

The page can be viewed here: https://marcjamesgallery.com/pages/catalogue

Screenshot.jpg
Screenshot.jpg2057×1281 328 KB

2

Hi @marcjames

Please add this code to the Custom CSS of that multiple-column section to solve it

ul.grid { justify-content: space-between; }
.multicolumn-list__item.center .media--adapt img { width: 100%; }
3

Hello @marcjames

Go to online store ---------> themes --------------> actions ------> edit code-------> assets------>section-multicolumn.css ------> line number 224
delete this code

.multicolumn-list {
column-gap: 0 !important;
}

Go to online store ---------> themes --------------> actions ------> edit code-------> assets------>section-multicolumn.css ------> line number 32

.multicolumn-list__item.center .media--adapt, .multicolumn-list__item .media--adapt .multicolumn-card__image:nth-child(2) {
width: auto;
}

and the result will be

7.png
7.png1920×3411 1.24 MB

If this was helpful, hit the like button and mark the job as completed.
Thanks

4

Many thanks! This worked perfect.