How to change Multicolumn to 2 rows on mobile?

collins276 · ‎02-06-2024

Hello,

Can I change Multicolumn section to 2 rows (as the red blocks) instead of 3 rows on Mobile.

Thank you,

Dan-From-Ryviu · ‎02-06-2024

You can do that by adding this code to the theme.liquid file after <head> in Online Store > Theme > Edit code

<style>
@media (max-width: 767px) {
#Slide-template--16325952995510__multicolumn_GQTarg-2,
#Slide-template--16325952995510__multicolumn_GQTarg-3 {
max-width: calc(50% - 2px) !important;
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎02-06-2024

Code updated

<style>
@media (max-width: 767px) {
.multicolumn-list li:nth-child(2),
.multicolumn-list li:nth-child(3) {
max-width: calc(50% - 2px) !important;
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎02-06-2024

Hi @collins276

You can do that by adding this code to the theme.liquid file after <head> in Online Store > Theme > Edit code

<style>
@media (max-width: 767px) {
#Slide-template--16325952995510__multicolumn_GQTarg-2,
#Slide-template--16325952995510__multicolumn_GQTarg-3 {
max-width: calc(50% - 2px) !important;
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

collins276 · ‎02-06-2024

Thank you😀

Is it possible to use Classname? Because if I remove and add columns again, Shopify will generate a new id.

Dan-From-Ryviu · ‎02-06-2024

Code updated

<style>
@media (max-width: 767px) {
.multicolumn-list li:nth-child(2),
.multicolumn-list li:nth-child(3) {
max-width: calc(50% - 2px) !important;
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

How to change Multicolumn to 2 rows on mobile?

How to change Multicolumn to 2 rows on mobile?

Community Blog Articles