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

Store Design
1

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.

categorie_list.jpg
categorie_list.jpg3508×2480 332 KB

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! :slightly_smiling_face:

Christina

2

@christinasmb Please share the store URL.

3

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

Thank you very much, Christina

4

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

5

@christinasmb
Are you able to add the CSS code?

6

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. :disappointed_face:

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

Thank you very much in advance, Christina

7

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

8

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

9

Please share your Email Id here.

10

@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

11

Maybe anyone else has an idea? :slightly_smiling_face:

Thank you so much in advance!

Christina

1 Like