Avoid images to stack on mobile (Motion theme, logo list)

[christinasmb]

Hello there,

I'm using Motion theme and want to use the "logo list" to show my shop categories, but I don't want that the categories got stack on mobile. Please see picture attached: The left one is how it looks now, the right one is how I want it to look like. 

 

I already tried out some code I found on Google and in the Shopify discussion, but it didn't work.

Can anyone help me out with this?

Thank you very much in advance for your help! 🙂

Christina 

[LetsCode]

@christinasmbPlease share the store URL.

[christinasmb]

Hello @LetsCode 
thank you very much for your reply and checking out if you could help me! 🙂
The store URL I'm talking about is: https://www.wildsun.de/collections/wasserfester-schmuck

Thank you very much, Christina 

[LetsCode]

@christinasmb 
Please add this css in bottom of your css file
@media only screen and (max-device-width: 480px) {
.logo-bar__item {
flex: min-content;
}
}

[LetsCode]

@christinasmb 
Are you able to add the CSS code?

[christinasmb]

Hello @LetsCode ,

I have nothing called exactly "CSS", but I tried to add it to several coding files (like theme.liquid, theme.css.liquid, etc) but it did not work. 😞 

Do you have another idea? Or where should I add the code exactly?

Thank you very much in advance, Christina 

[LetsCode]

@christinasmb 
Add the code in very bottom of the theme.css.liquid. And let me know so that I can check.

[LetsCode]

Please share your Email Id here.

[christinasmb]

@LetsCode I tried again to add it  in very bottom of the theme.css.liquid, but it didn't work. My Email is: christina.shopify@gmail.com

[christinasmb]

@LetsCode but I found exactly the file witch the "logo list" file, maybe this helps?

"1662887049925d1845": {
"type": "logo-list",
"blocks": {
"1662887049ee5da453-3": {
"type": "logo_image",
"settings": {
"image": "shopify:\/\/shop_images\/kategorie_ketten_22575930-4298-4bb2-82cc-7171a4c99a31.jpg",
"link": "shopify:\/\/collections\/ketten"
}
},
"1662887049ee5da453-0": {
"type": "logo_image",
"settings": {
"image": "shopify:\/\/shop_images\/kategorie_ohrringe_af9dca0f-b515-4f6d-9eec-d4fae4fe89ff.jpg",
"link": "shopify:\/\/collections\/ohrringe"
}
},
"1662887049ee5da453-2": {
"type": "logo_image",
"settings": {
"image": "shopify:\/\/shop_images\/kategorie_ringe_db939ab2-a9ed-412f-8c51-dd9d7a9e5b04.jpg",
"link": "shopify:\/\/collections\/ringe"
}
},
"1662887049ee5da453-1": {
"type": "logo_image",
"settings": {
"image": "shopify:\/\/shop_images\/kategorie_armbaender_cd8e9352-de1b-4d73-95ce-6d07d7701466.jpg",
"link": "shopify:\/\/collections\/armbander"
}
}
},
"block_order": [
"1662887049ee5da453-3",
"1662887049ee5da453-0",
"1662887049ee5da453-2",
"1662887049ee5da453-1"
],
"settings": {
"title": "",
"logo_opacity": 100,
"divider": false
}
},

[christinasmb]

Maybe anyone else has an idea? 🙂

Thank you so much in advance!

Christina