How can I center align a section in my custom code?

Technical Q&A
1

Hi,

I have some issues with a custom code for my website to display some logos.

However, I have an issue with it being centred (it’s currently left aligned for some reason) - can anyone help me with this?

I’ve attached the custom code below:


{%- if section.settings.show_full_width == true-%}

{% endif %}

  ### {{ 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: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
            {% else %}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
            {% if block.settings.link != blank %}
            
            {% endif %}
        
      {% endfor %}
    

  {% endif %}

{% 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": "150px",
        "options": [
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          },
          {
            "label": "Extra Large",              
            "value": "200px"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "show_full_width",
        "label": "Show fullwidth",
        "default": true
      }
    ],
    "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 %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
2

@pa604

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

1 Like
3

Try replacing your current styling with this:
4

I tried replacing it but this error message popped up -

This file contains the following errors:

  • Line 59 — Liquid syntax error: ‘schema’ tag must not be nested inside other tags
5

Okay, could you provide your store URL to the page in question and I’ll take a look into it for you

1 Like