I am trying to display 3 columns in 1 row - Shopify

GeorgeLugo
September 28, 2021
212 views
3 votes
4 Answers

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

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:

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.

Answers

.logo-container { 
  display: flex; 
  flex-wrap: wrap 
} 

.card { 
  width: 220px; 
  padding:1em;
  text-align:center; 
}

<div class="logo-list"> 
<h2 class="heading center"> sectiontitle</h2> 
  <div class="logo-container"> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
      <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h3> 
      <p>text</p> 
    </div> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
        <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h3> 
      <p>text</p> 
    </div> 
    <div class="card"> 
      <a class="logo-link" href="{{ block.settings.link }}"> 
      <img loading="lazy" src="https://via.placeholder.com/150"> 
      </a> 
      <h3>title</h2> 
      <p>text</p> 
    </div> 
  </div> 
</div>

i have added solution with codeEditer check if this works fine for you

- CJLosande
- September 28, 2021 at 4:52 am
- 0 votes
0
Put it inside a row and loop through cols
```
    <div class="logo-container">
     <div class="card">
      <div class="row">
        //start of loop
        <div class="col-4">
          //insert content here
        </div>
        //end of loop
     </div>
    </div>
```
Login or Signup to reply.

Try This code and use bootstrap for css so first you have to import bootstrap CDN
which is available on this link https://getbootstrap.com/docs/5.0/getting-started/introduction/

Remove all css which you applied and use this css

<style>
  .wid{
  width: 100%;
  }
</style>

Your updated Template Code:-

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

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

try something like this:

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

  <div class="service-container main-container">
    <div class="cards">
      {% for block in section.blocks %}
        <div class="card">
          <a class="service-link" href="{{ block.settings.link }}">
            <img loading="lazy" src="{{ block.settings.image | img_url: '500x500' }}">
          </a>
          <article>
            <h3>{{block.settings.title}}</h2>
            <p>{{ block.settings.text }}</p>

          </article>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

and CSS

.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.card {
  flex: 0 0 339px;
  height: 528px;
}

Please signup or login to give your own answer.

Click here to cancel reply.

I am trying to display 3 columns in 1 row – Shopify

Answers