Enterprise Theme - Multi-column Section - Keep columns/object in same size

[Ryhage]

Hi,

We are using the Multi-column section to display our different Functions on our "Function-pages". The Functions/content appear automatically as they are Metaobjects that are connected to the Multi-column section.

We have set the Multi-column to display Column-size as "Small", so there are maximum 4 Functions displayed in each row.

The problem is that when there are (for example) 6 Functions, the 2 Functions in bottom row get stretched out.

How can we change this so all Functions keep same size no matter how many are in each row?

LINK: https://72128c-9a.myshopify.com/pages/functions-tap

Password: marcus

[DaisyVo]

Hi @Ryhage 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 1024px){
div.shopify-section.cc-multi-column .container > ul > li {
    max-width: 23%;
}
}

Here is the result: https://prnt.sc/zfIb2QQyhZ-p

I hope this helps

Best,

Daisy

[Ryhage]

Hi Daisy,

First of all, in your screenshot (https://prnt.sc/zfIb2QQyhZ-p) it seems like the columns are not aligned correctly (horizontally).

I tested to paste your code into Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS. The site automatically updates and achieves the correct result, but when i press "Save", i get error message "Online Store editor cannot be saved". This is an error i have never seen before.

[DaisyVo]

Hi @Ryhage 

Please try this:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

{% style %}
@media screen and (min-width: 1024px){
div.shopify-section.cc-multi-column .container > ul > li {
    max-width: 23%;
}
}
{% endstyle %}

Best,

Daisy

[Ryhage]

Hi,

Thanks for your code. But before i apply it ill ask you the same question i asked "Topnewyork"

Isn't it better if i can achieve the result via Custom CSS?

I thought using Custom CSS was better since then we leave the theme-code in its "Original" state and Custom CSS will also be applied/remain when we update the theme in future. Is this correct?

[DaisyVo]

Hi @Ryhage 

I have tried to share with you the code to apply to the Custom Css, but it seems that your theme doesn't allow you to save it. As I don't have access to your store, I can not sure the reason why

And, also " I thought using Custom CSS was better since then we leave the theme-code in its "Original" state and Custom CSS will also be applied/remain when we update the theme in future. Is this correct?" It will work the same with adding the code on the head, so don't worry, just add the code I shared above ❤️

Best,

Daisy

[Ryhage]

Hi Daisy and thank you. I now added below code and it works:

@media (min-width: 767px) {
li.multi-column.grow.w-full.max-w-none.cc-animate-init.cc-animate-in {
max-width: 23%;
}
}

But i realize this is not a good solution:

1. The problem still persist on mobile version.

I know we can solve this by adding another Custom CSS for mobile.

2. The code now reduce the size of the Multi-columns on other pages.

I know we can solve this by adding the Custom CSS to separate pages and not globally.

I need the Multi-columns to able to be set in different sizes (small, medium, large) on different pages. And i need this size to be kept no matter how many "Objects" that are in the second row.

We just want to DISABLE the "stretch-out" function in Multi-column so that objects/columns are kept in the size that I set them to (small, medium or large) across all rows and on entire site.

[Ryhage]

Shopify Theme - Enterprise

[topnewyork]

Hello, @Ryhage 

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

div#template--24018195775813__multi_column_DwDcqM ul {
	flex-wrap: nowrap !important;
}

.text-center {
    padding-left: 2rem !important;
}

 Thanks! 

[Ryhage]

Hi,

Thanks for your code. But isn't it better if i can achieve the result via Custom CSS?

I thought using Custom CSS was better since then we leave the theme-code in its "Original" state and Custom CSS will also be applied/remain when we update the theme in future. Is this correct?

[Ryhage · Accepted solution]

Here is the solution for you all.

Custom CSS:

.grow { flex-grow: 0 }