How can I modify multicolumn color and text size?

[BumbleBabies]

Hi,

I wanted to change the colour of the boxes themselves and the text colour. As well as make them a bit smaller with smaller text. Anyone know how this can be done?

https://061eajjeyilmqxlu-5793742905.shopifypreview.com is the theme I’m working on.

Any help is much appreciated.

Many thanks,

Callum

[dmwwebartisan]

@BumbleBabies

Please share a screenshot of what do you want!

Thanks!

[Zworthkey]

@BumbleBabies

Welcome to the Shopify community!
Thanks for your good question.

for that, you have to make it by the custom code. and you need a developer to custom code.
let me know if you need help, we are happy to help you.

thank you.

[BumbleBabies]

Ah sorry, yes of course!

I wanted to change the box colour to #7d7d7d and the text colour to white. and make the boxes maybe 80% of what they are now with small text to fit, if that makes sense?

[Denishamakwana]

Please add below css in bottom of assets/section-multicolumn.css file

.multicolumn-list .multicolumn-card {
background: #7d7d7d;

}
.multicolumn-list .multicolumn-card p {
color: #fff;
}
Thank you.

[BumbleBabies]

Hi @Denishamakwana

Thanks for the reply. The text has changed, but the boxes have remained the same colour?

Many thanks,

Callum

[Denishamakwana]

Please try this

.multicolumn-list .multicolumn-card {
background: #787878 !important;

}
Thank you.

[Zworthkey]

@BumbleBabies

.multicolumn-list .multicolumn-card {
    background: #787878 !important;
}

Add this code

[BumbleBabies]

Hi @Denishamakwana

You legend, it’s works great, thank you! Is there a way to make them a bit smaller with the text to fit?

Many thanks

[Zworthkey]

@BumbleBabies

.multicolumn-card__info .rte p {
    font-size: 12px !important;
}

Add this code.

[Denishamakwana]

Please add below css in bottom of assets/component-slider.css file

.multicolumn .slider-mobile-gutter {

display: flex;

width: 100%;

justify-content: center;

}

ul.multicolumn-list {

width: 80%;

}

.multicolumn-list .multicolumn-card p {
font-size: 14px;

}

[BumbleBabies]

Amazing, last problem is that now on mobile the card numbers “1/4” is on the side instead of on the bottom.. is there a fix for that?

[Denishamakwana]

Please add this

@media only screen and (max-width:1023px) {

.multicolumn .slider-mobile-gutter {

display: block;
}

}

Thank you.

[Denishamakwana]

Hi,

You can change width as per your requirement in

ul.multicolumn-list class
Please do not change width in this (slider-mobile-gutter ) class.
Thank you.

[BumbleBabies]

Wonderful @Denishamakwana Thank you so much, really appreciate it.

[myKidsLounge]

Hi @Denishamakwana ,

Thank you, this definitely works, however I was trying to only make the “cards” in one specific multicolumn in #ECE1D7. (as seen below it worked very well with your code)

However, now all multicolumns around the shop have this background which we wouldn’t like it to be. (see below)

Do you have a solution for this?

Thank you and looking forward to your feedback.

Best regards,

Daniel