I found a custom code to add logo list for my website.
On desktop it looks all ok but on mobile its aligned right but i want it to be centered.
Heres the code:
{{ section.settings.title | escape }}
-
{%- for block in section.blocks -%}
- {%- if block.settings.link != blank -%} {%- 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 -%} {%- endif -%} {%- endfor -%}
.logoList–container ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
justify-content: center;
}
.logoList–item{
display: inline-block;
max-width: {{ section.settings.logo_width }};
}
.logoList–item img{
width: 100%;
}
{% 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 %}
