DEBUT THEME - How to get collections centered on page?

[BootlegCraig]

Hi there! I’m looking to spotlight two products on my homepage, and the only way I’m seeing that to be possible with just a clickable image for each item is to have them in their own collection. The problem I’m having is that when I have an odd number of items, they all align left, and it looks awful. I’ve tried adding the following:

ul.grid.grid--uniform {
justify-content: center!important;
display: flex;
}

But it doesn’t work as the items in my collections then become one long line of tiny images for some reason. Any insight/suggestions? Site is www.imakeflair.com

[MarinaPetrovic]

Hi @BootlegCraig , there should be an option in your customizer to set this up, in order to create grid to look like this (image), you should change class from ‘grid__item small–one-half medium-up–one-third’ to ‘grid__item small–one-half medium-up–one-half’. In Debut theme this should be done through customizer.
Go to edit code > sections > collection-list.liquid and compare your file with this one:

  {% if section.settings.title != blank %}
    

      ## {{ section.settings.title | escape }}
    

  {% endif %}

  {% liquid
    case section.settings.grid
      when 2
        assign grid_item_width = 'medium-up--one-half'
      when 3
        assign grid_item_width = 'small--one-half medium-up--one-third'
      when 4
        assign grid_item_width = 'small--one-half medium-up--one-quarter'
      when 5
        assign grid_item_width = 'small--one-half medium-up--one-fifth'
    endcase 
  %}

  
    

      {% for block in section.blocks limit: section.blocks.size %}
        - {%- assign collection = collections[block.settings.collection] -%}
            {% render 'collection-grid-item', collection: collection %}
        
      {% endfor %}
    

  

  {% if section.blocks.size == 0 %}
    {% render 'no-blocks' %}
  {% endif %}

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "class": "index-section",
  "max_blocks": 12,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.collection-list.settings.title.label",
      "default": "Collection list"
    },
    {
      "type": "range",
      "id": "grid",
      "label": "t:sections.collection-list.settings.grid.label",
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label",
          "id": "collection",
          "type": "collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "category": "t:sections.collection-list.presets.category",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}