How to modify Dawn theme for multicolumn view on mobile?

[Dabou]

I would like for this section to be as it is in the desktop view, so instead of each item being on top of each other, they should get smaller and be in one line.

[Zeel-prajapati]

Hey @Dabou please share your site URL here so i can check.

[TerenceKEANE]

use these

@media (max-width: 991.98px){
    .grid--1-col-tablet-down .grid__item {
    width: min-content!important;
}
}

[Dabou]

@TerenceKEANE it worked thank you, but the words are breaking

so i added

white-space: nowrap;

Do you know how can i keep the 3 in the same line but reduce their size so they fit well ?

[TerenceKEANE]

Yes. If I didn’t misunderstand, the following codes should fully serve your purpose. you want a view like the one in the screenshot, right? I would recommend checking again for any issues across the website after adding the codes. Since the place you added is global, if the same ‘class’ exists on other pages, it will also change their style.

@media (max-width: 991.98px){
    
#shopify-section-template--14809702858807__multicolumn_FP8dri .grid--1-col-tablet-down .grid__item {
    width: min-content!important;
    max-width: 31%;
}

.multicolumn-card__info > .inline-richtext {
    font-size: 14px;
    white-space: nowrap;
}

.multicolumn-list:not(.slider) {
    padding-left: 0;
}
.multicolumn-card.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

}

[Dabou]

@TerenceKEANE it worked, im only using one multicolumn in my website, later I’ll add another to check, but thank you, this helped a lot.

[TerenceKEANE]

you are welcome