How to make all the columns from my multicolumn section the same height ?

[Rushngo]

Hello,

I'm having trouble finding a way to make all the columns in my multicolumn section the same size, regardless of the size of the text inside.

If anyone can help me that would be great! 

I'm attaching an image to my request to make it easier to visualize.

[CafeDelMar]

Hi @Rushngo. Welcome to the Shopify Community!

Please, share the store URL (and the password, if applicable) along with the frame location. It would be much easier to debug and solve.

[Moeed]

Hey @Rushngo 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Rushngo]

it's https://rushngo.com/pages/studies and there's no password 👍🏻

[CafeDelMar · Accepted solution]

@Rushngo, here's how to achieve that:

1) Go to "Online Store"
2) Three dots -> Edit Code
3) Find the base.css file
4) Add the following code at the bottom of the file

5) Save and refresh the target store page

.splide__slide__container {
    height: 100% !important;
}

.multicolumn-card.content-container.color-custom.cards-color-scheme-template--25093199003991__multicolumn_NJ6F86.gradient.multicolumn--diff-bgs.animate-item.animate-item--child {
    height: 100% !important;
}

If done correctly, the result should be like this:

I hope this helps!

If you don't want to edit the theme code directly, you can use a code injection app like the one in my signature.

[Rushngo]

It's perfect thanks CafeDelMAr ! 👍🏻

[Rushngo]

Also, could you tell me how to make the “read more” with the arrow stay at the bottom right of its column please?

[CafeDelMar]

@Rushngo, please, try the following:

.splide__track ul li div.multicolumn-card__info div.rte {
	margin-bottom: 35px !important;
}

.splide__track ul li div.multicolumn-card__info a {
	position: absolute !important;
	bottom: 15px !important;
}

[Rushngo]

It's at the bottom but not on the right side 😅

[CafeDelMar]

Here you go 🙂

.splide__track ul li div.multicolumn-card__info div.rte {
	margin-bottom: 35px !important;
}

.splide__track ul li div.multicolumn-card__info a {
	position: absolute !important;
	bottom: 15px !important;
	right: 30px !important;
}

[Rushngo]

PERFECT, thank you so much you were of great help !! 🙏

[CafeDelMar]

Anytime! Glad to help! 🙂