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

Solved

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

marcjames
New Member
6 0 0

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

Marc James
Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8467 1665 1676

This is an accepted solution.

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%; }

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
8467 1665 1676

This is an accepted solution.

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%; }

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

marcjames
New Member
6 0 0

Many thanks! This worked perfect. 

Marc James

GTLOfficial
Shopify Partner
262 50 51

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

 

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh