Solved

Dawn - Change multicolumn mobile view

Dabou
Explorer
118 2 16

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.

Dabou_2-1707447410206.png

 

 

Dabou_0-1707447284799.png

 

 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Accepted Solution (1)
TerenceKEANE
Shopify Partner
120 30 52

This is an accepted solution.

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.

 

Screenshot 2024-02-10 001254.png

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

}

 

 

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com

View solution in original post

Replies 6 (6)

Zeel-prajapati
Tourist
7 1 1

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

TerenceKEANE
Shopify Partner
120 30 52

use these

 

@media (max-width: 991.98px){
    .grid--1-col-tablet-down .grid__item {
    width: min-content!important;
}
}
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
Dabou
Explorer
118 2 16

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

Dabou_0-1707477319673.png

so i added 

white-space: nowrap;

 

Dabou_1-1707477378583.png


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

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
TerenceKEANE
Shopify Partner
120 30 52

This is an accepted solution.

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.

 

Screenshot 2024-02-10 001254.png

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

}

 

 

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
Dabou
Explorer
118 2 16

@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.

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
TerenceKEANE
Shopify Partner
120 30 52

you are welcome 🙂

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com