Change Logo List on Mobile to 3 Logos per Row (instead of 1 Logo per Row)

[annemaria]

Hi everyone,

I had found the liquid code for a Shopify 'logo list’ homepage section which the 'easy code guide' was so kind to publish on his/her website here: https://easycodeguide.com/how-to-build-a-customizable-logo-list-section-on-your-shopify-homepage.htm...


Your Kind Help / Guidance Needed:

I would highly appreciate some help to make a small tweak to that 'logo list' liquid code in my Shopify store under sections.

I would like to change it so that on mobile it shows 3 logos in a row (or 2 logos in a row) and not just 1 logo per row, as it is right now by default, details with images and code below.

Would anyone here be able to pinpoint me how I need to update the code for that?

Thank you so much in advance,

Anne

How I would like it to be with 3 logos per row on mobile:

How I would like it to look like on mobile with 3 logos per row

How it looks right now with 1 logo per row on mobile:

How it looks like right now with 1 logo per row

This is the current logo list code (copy and paste from above linked website) - Credit goes to www.easycodeguide.com and the full code in better visualisation can be found here: https://easycodeguide.com/how-to-build-a-customizable-logo-list-section-on-your-shopify-homepage.htm...

1. <style type="text/css">
2. .logo-list__header {
3. text-align: center;
4. }
5. .logo-bar {
6. text-align: center;
7. margin-bottom: 30px;
8. }
9.  
10. .logo-bar__item {
11. display: inline-block;
12. vertical-align: middle;
13. max-width: 160px;
14. margin: 0 20px 20px;
15. }
16.  
17. .logo-bar__image {
18. display: block;
19. margin: 0 auto;
20. }
21.  
22. .logo-bar__link {
23. display: block;
24. text-decoration: none;
25. }
26. </style>
27.  
28. <div class="logo-list">
29. {%- if section.settings.title != blank -%}
30. <div class="logo-list__header">
31. <h2>{{ section.settings.title | escape }}</h2>
32. </div>
33. {%- endif -%}
34.  
35. {%- if section.blocks.size > 0 -%}
36. <div class="logo-bar">
37. {%- for block in section.blocks -%}
38. <div class="logo-bar__item" {{ block.shopify_attributes }}>
39. {%- if block.settings.link != blank -%}
40. <a href="{{ block.settings.link }}" class="logo-bar__link">
41. {%- endif -%}
42. {%- if block.settings.image != blank -%}
43. {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
44. {%- else -%}
45. {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
46. {%- endif -%}
47. {%- if block.settings.link != blank -%}
48. </a>
49. {%- endif -%}
50. </div>
51. {%- endfor -%}
52. </div>
53. {%- endif -%}
54. </div>
55.  
56. {% schema %}
57. {
58. "name": "Logo list [ShopifyExplorer]",
59. "class": "index-section",
60. "max_blocks": 20,
61. "settings": [
62. {
63. "type": "paragraph",
64. "content": "Keep update from [ShopifyExplorer](http://easycodeguide.com/?p=304)"
65. },
66. {
67. "type": "text",
68. "id": "title",
69. "label": "Heading",
70. "default": "Logo list"
71. }
72. ],
73. "blocks": [
74. {
75. "type": "logo_image",
76. "name": "Logo",
77. "settings": [
78. {
79. "type": "image_picker",
80. "id": "image",
81. "label": "Image"
82. },
83. {
84. "type": "url",
85. "id": "link",
86. "label": "Link",
87. "info": "Optional"
88. }
89. ]
90. }
91. ],
92. "presets": [
93. {
94. "name": "Logo list",
95. "category": "Image",
96. "blocks": [
97. {
98. "type": "logo_image"
99. },
100. {
101. "type": "logo_image"
102. },
103. {
104. "type": "logo_image"
105. },
106. {
107. "type": "logo_image"
108. }
109. ]
110. }
111. ]
112. }

[CurtisB]

@annemaria great question. . .I'll be watching to see if any gurus provide a reply.  We'd like to achieve the same result on mobile. 

[juansmartdev]

Hello,

Hope you are doing great

Please share your site or a preview for your site to help you on this. To achieve this we have to change some CSS rules, so they logos can be responsive. 

I would take a look when you share your site

Stay Well,

Juan 

[annemaria]

Hi Juan,

Thank you so much for your reply and offer.

I was able to get this solved. I hired a coder who did the CSS changes custom for my store and logo arrangement needs.

Have a great day,

Anne-Maria

[diego_ezfy]

I'm glad to hear you managed to get that fixed, @annemaria 

Next time feel free to contact me personally if you need help, I'll be happy to assist.

Kind regards,
Diego