How to edit code for mobile logo list section?

Store Design

Topic summary

A user is seeking help to modify CSS code for a logo-list section to improve mobile responsiveness and alignment.

Desktop Requirements:

  • Display all 6 logos in a single row

Mobile Requirements:

  • Show 2 logos per row
  • Center-align the logos (currently right-aligned)

Code Provided:
The user shared their existing Shopify Liquid template code with CSS for a logo list section, including schema settings for logo width, padding, and image blocks.

Current Status:
A community member has requested the store URL to provide specific assistance. The user responded with a link to the page where the section is implemented (at the bottom of a catering gifts page). The discussion remains open, awaiting technical guidance on the necessary CSS modifications.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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!


## {{ 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 -%}
  

{% 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 %}
1 Like
2

Hi @softdoughco

Would you mind sharing your store URL? Thanks!

3

Hi there - I added the section at the very bottom of this page Catering page

Thank you.