Hi everyone , I have the logo-list on my store and it all looks fine on PC however on mobile devices the logos are huge and are all shown bellow each other rather than at the side of each other.
Is there a way to have them smaller on mobile devices please?
any help appreciated and current code:
.logo-bar__item { display: inline-block; max-width: {{ section.settings.logo_width }}; }{{ section.settings.title | escape }}
{%- if section.blocks.size > 0 -%}
-
{%- 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 -%}
{% schema %}
{
“name”: “Logo list”,
“class”: “index-section”,
“max_blocks”: 10,
“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”: “100px”
},
{
“label”: “Small”,
“value”: “125px”
},
{
“label”: “Medium”,
“value”: “160px”
},
{
“label”: “Large”,
“value”: “175px”
},
{
“label”: “Extra Large”,
“value”: “200px”
}
]
}
],
“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 %}
