Hoping someone can guide me on how to edit the below code for a logo-list section. I'd like it to be mobile-friendly and center-aligned.
In desktop, I'd like the 6 logos to be all on one row. And 2 logos per row in mobile.
When I check the code in mobile, the logos are also leaning to the right.
Any guidance will be helpful, thanks!
<div class="logoList--container page-width" style="padding-top: {{ section.settings.padding_top | append: "px" }}; padding-bottom: {{ section.settings.padding_bottom | append: "px" }}">
<h2 class="h1">{{ section.settings.title | escape }}</h2>
<ul>
{%- for block in section.blocks -%}
<li class="logoList--item" {{ block.shopify_attributes }}>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
<style>
.logoList--container {
padding-top: 20px;
padding-bottom: 20px;
margin: auto;
justify-content: center;
}
.logoList--container ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
justify-content: center;
}
.logoList--item{
display: inline-block;
max-width: {{ section.settings.logo_width }};
}
.logoList--item img{
width: 100%;
display:inline-block;
}
</style>
{% schema %}
{
"name": "Logo list",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "select",
"id": "logo_width",
"label": "Logo width",
"default": "160px",
"options": [
{
"label": "Extra Small",
"value": "50px"
},
{
"label": "Small",
"value": "100px"
},
{
"label": "Medium",
"value": "160px"
},
{
"label": "Large",
"value": "200px"
},
{
"label": "Extra Large",
"value": "400px"
}
]
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 2,
"default": 20,
"label": "Padding top"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 2,
"default": 20,
"label": "Padding bottom"
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}
