Solved

How to change Multicolumn to 2 rows on mobile?

MiuMiu237
Explorer
118 1 24

Hello,

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

My url: https://189ee3-2.myshopify.com/ 

Thank you, 

 

Screenshot2.png

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7019 1327 1352

This is an accepted solution.

Hi @MiuMiu237 

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Dan-From-Ryviu
Shopify Partner
7019 1327 1352

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
7019 1327 1352

This is an accepted solution.

Hi @MiuMiu237 

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

MiuMiu237
Explorer
118 1 24

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
Shopify Partner
7019 1327 1352

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now