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

Highlighted
New Member
2 0 0

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 rowHow 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 rowHow 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. }
0 Likes
Highlighted
New Member
2 0 1

@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. 

1 Like
Highlighted
Excursionist
46 11 13

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 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Worked for 2 years as Shopify Developer.
◦ Contact me at: juansmartdev@beeethereal.com
1 Like
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Astronaut
1087 180 213

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes