How can I arrange blog post images in a row instead of a column?

Technical Q&A
1

Hi everyone,

I am trying to make blog posts and I would like to have the pictures of them next to each other, so a row of 3 images. However, now I get the pictures all stacked on top of each other, creating a column.

Does anyone know how to fix it?
Thank you very much in advance!!

I used the “express” shopify theme.

The code of my blog is below and my blog posts look like this now (but I would like to have it with the black boxes please):

BadCoder2021_0-1625908108476.png
BadCoder2021_0-1625908108476.png1458×514 14.6 KB


  

  
    {% for article in blog.articles %}
      - ## 
            {{ article.title }}
        

          {%- if section.settings.show_author -%}
            {{ 'blogs.article.by_author' | t: author: article.author }}
          {%- endif -%}

          {%- if section.settings.show_date -%}
          
              {{ article.published_at | time_tag: format: 'date' }}
          
          {%- endif -%}

          {%- if article.image -%}
          
            
          
          {%- endif -%}

        

            {%- if article.excerpt.size > 0 -%}
              {{ article.excerpt }}
            {%- else -%}
              {{ article.content | strip_html | truncate: 150 }}
            {%- endif -%}
        

          {%- if article.tags.size > 0 -%}
          
              {{ 'blogs.article.posted_in' | t }}
              {% for tag in article.tags %}
                {{ tag }}{% unless forloop.last %}, {% endunless %}
              {% endfor %}
          

          {%- endif -%}

        
            - {{ 'blogs.article.read_more' | t }}
            
          
        
      
    {% endfor %}
  

.template-blog .main-content .wrapper > .grid{
  margin: 0;
}

.template-blog .main-content .wrapper > .grid > .grid__item{
  float: none;
  padding: 0; 
  left: 0;
  display: flex;
  flex-wrap: wrap;
}

.template-blog .main-content .wrapper > .grid > .grid__item .article.grid{
  margin:0;
  margin-bottom: 25px;
  width: 50%;
}

.template-blog .main-content .wrapper > .grid > .grid__item >  hr{
  display: none;
}

.template-blog .main-content .wrapper > .grid > .grid__item .pagination {
	width: 100%;
}

.template-blog .main-content .wrapper > .grid > .grid__item .article.grid > .grid__item{
 left: 0;
}

.template-blog .main-content .wrapper > .grid > .grid__item .article.grid > .grid__item:last-child{
  width: 80%;
  padding-left: 20px;
}

@media screen and (max-width: 768px){
  .template-blog .main-content .wrapper > .grid > .grid__item > .section-header{
    width: 100%;
    margin-bottom: 25px;
  }
  
  .template-blog .main-content .wrapper > .grid > .grid__item .article.grid > .grid__item{
    left: 0;
    padding-left: 0;
 }
 .template-blog .main-content .wrapper > .grid > .grid__item .article.grid > .grid__item:last-child{
    width: 90%;
    padding-left: 0;
  }
}

@media screen and (max-width: 590px){
  
  .template-blog .main-content .wrapper > .grid > .grid__item .article.grid{
    margin:0;
    margin-bottom: 25px;
    width: 100%;
  }

 .template-blog .main-content .wrapper > .grid > .grid__item .article.grid > .grid__item:last-child{
    width: 100%;
    padding-left: 0;
  }
}

{% schema %}
{
  "name": {
    "cs": "Stránky blogu",
    "da": "Blogsider",
    "de": "Blog-Seiten",
    "en": "Blog pages",
    "es": "Páginas del blog",
    "fi": "Blogisivut",
    "fr": "Pages du blog",
    "it": "Pagine del blog",
    "ja": "ブログページ",
    "ko": "블로그 페이지",
    "nb": "Bloggsider",
    "nl": "Blogpagina's",
    "pl": "Strony blogu",
    "pt-BR": "Páginas do blog",
    "pt-PT": "Páginas do blogue",
    "sv": "Bloggsidor",
    "th": "หน้าบล็อก",
    "tr": "Blog sayfaları",
    "vi": "Trang Blog",
    "zh-CN": "博客页面",
    "zh-TW": "網誌頁面"
  },
  "settings": [
    {
      "id": "show_author",
      "type": "checkbox",
      "default": true,
      "label": {
        "cs": "Zobrazit autora",
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pl": "Pokaż autora",
        "pt-BR": "Exibir autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "tr": "Yazarı göster",
        "vi": "Hiển thị tác giả",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      }
    },
    {
      "id": "show_date",
      "type": "checkbox",
      "default": true,
      "label": {
        "cs": "Zobrazit datum",
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pl": "Pokaż datę",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "tr": "Tarihi göster",
        "vi": "Hiển thị ngày",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      }
    }
  ]
}
{% endschema %}
2

Hi @BadCoder2021

Sincerely hope you’re having a great day!
I’ve read your problem and, before providing a solution, would like to analyze your website. Then, I will provide a solution to you up here - on the forum.
Could you share your website URL? And if your website is password protected, then also provide a password?
If you have any further questions, please do reach out either here on the forum, or via a private message/email.