How to fix alignment and image size in website mega menu?

Technical Q&A
1

So I have just visited my website https://4moms.com.au/ adn realised the mega menu under “shop” was looking very weird. it was aligning to the right and all the collection image sizes were all over the shop.

Can I please get some coding assistance to align the collection tiles to the centre and make all colleciton images the same size? They were all looking correct before but suddenly appeared like this.

Code for mega-menu-collections.liquid below

Thanks

{% assign collection_ids = 'collection_1,collection_2,collection_3,collection_4,collection_5' | split: ',' %}

    

        {% for collection_id in collection_ids %}
            {% if block.settings[collection_id] == blank %}{% continue %}{% endif %}
            {% assign collection_handle = block.settings[collection_id] %}
            {% assign collection = collections[collection_handle] %}
            {% assign collection_image = collection.image %}
            {% assign image_id = 'image_' | append: forloop.index %}

            {% if block.settings[image_id] != blank %}
                {% assign collection_image = block.settings[image_id] %}
            {% endif %}
            

                

                    

                        
                            {% if collection_image != blank %}
                                {% render 'responsive-image', image: collection_image, aspect_ratio: '3/4' %}
                            {% else %}
                                

                                    {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                                    {{ 'collection-' | append: current | placeholder_svg_tag: 'sf__placeholder-svg w-full h-full w-full h-full object-cover' }}
                                

                            {% endif %}
                        
                        ### 
                            
                                {{ collection.title | default: default_label }}
                                <sup>{{ collection.all_products_count }}</sup>
                            
                        
                    

                

            

        {% endfor %}

{% assign collection_ids = ‘collection_1,collection_2,collection_3,collection_4,collection_5’ | split: ‘,’ %}

{% for collection_id in collection_ids %} {% if block.settings[collection_id] == blank %}{% continue %}{% endif %} {% assign collection_handle = block.settings[collection_id] %} {% assign collection = collections[collection_handle] %} {% assign collection_image = collection.image %} {% assign image_id = ‘image_’ | append: forloop.index %} {% if block.settings[image_id] != blank %} {% assign collection_image = block.settings[image_id] %} {% endif %}

{% if collection_image != blank %} {% render ‘responsive-image’, image: collection_image, aspect_ratio: ‘3/4’ %} {% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ ‘collection-’ | append: current | placeholder_svg_tag: ‘sf__placeholder-svg w-full h-full w-full h-full object-cover’ }}
{% endif %}### {{ collection.title | default: default_label }} {{ collection.all_products_count }}

{% endfor %}