I am trying to display 3 columns in 1 row

In my shopify section I am trying to display a section like this that I … Read more I am trying to display 3 columns in 1 row

In my shopify section I am trying to display a section like this that I can add to my homepage.

Text column with images

The issue is that I am using a shopify liquid schema with the following code.

logo-list.liquid

<div class="logo-list">
    <h2 class="heading center">{{ section.settings.title }}</h2>

    <div class="logo-container">
        <div class="card">
            {% for block in section.blocks %}
                <a class="logo-link" href="{{ block.settings.link }}">
                    <img loading="lazy" src="{{ block.settings.image | img_url: '1048x1048' }}">
                </a>
                <h3>{{block.settings.title}}</h2>
                <p>{{ block.settings.text }}</p>
            {% endfor %}
        </div>
    </div>
</div>

{% schema %}
{
    "name": "Logo List",
    "max_blocks": 4,
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Logo List"
        }
    ],
    "blocks": [
        {
            "type": "logo_image",
            "name": "Logo",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Logo image"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Heading",
                    "default": "Section Heading"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "Description",
                    "default": "<p>Add your description here</p>"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "Logo link",
                    "info": "Optional"
                }
            ]
        }
    ],
    "presets": [
        {
           "name": "Logo list",
           "category": "Image",
           "blocks": [
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                }
           ] 
        }
    ]
}

{% endschema %}

Here is the scss I made and I do not understand why it is not display like the image above.

.logo-container {
    display: flex;
    text-align: justify;
    flex-direction: row;


    padding-top: 50px;
}

.card {
    flex-direction: row;
}

.logo-link {
    max-width: 25%;
    justify-content: center;
    margin: 0 auto;


    img {
        width: 50%;
    }
}

This is what I am getting instead:

images from theme

I don’t know why it is appearing as a bunch of vertical columns when I want it to display as one row.

Any help appreciated.

Source: CSS – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *