How to get 3 blog columns on brooklyn theme

Store Design
1

Hi! Is there a way to get 3 blog columns instead of one in the brooklyn theme?

2

@Gabriellesimard

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

heres my store URL:

https://mybestfriendchies.com/

Thank you!!!

4

@Gabriellesimard

sorry but i can see only 1 blog can you please show me more!

5

I added 3 posts so you can see… https://mybestfriendchies.com/blogs/frenchbullblog

6

hi @Gabriellesimard can you provide liquid code for blog section!

7

this is the blog.liquid code

{% paginate blog.articles by 15 %}

{% if current_tags %} {{ blog.title | link_to: blog.url }} — {{ current_tags.first }} {% else %} {{ blog.title }} {% endif %} RSS

{% for article in blog.articles %}

{% assign article_content = article.excerpt_or_content %}

{% unless article.image == blank %}

{% endunless %}
{{ article.published_at | date: format: 'date' }}

{{ article.title }}

{{ article_content | strip_html | truncatewords: 120 }}

{{ 'blogs.article.read_more' | t }}

{% if article.tags.size > 0 %}

    {% include 'tags-article' %}
{% endif %}

{% unless forloop.last %}

{% endunless %}

{% endfor %}

{% if paginate.pages > 1 %}
{% include ‘pagination’ %}
{% endif %}

{% endpaginate %}

8

@Gabriellesimard

can you please confirm this look

KetanKumar_0-1636174042337.png
KetanKumar_0-1636174042337.png1920×1080 348 KB

9

Could it be possible to have a little space between the photos?

10

@Gabriellesimard

Yes its that possible can you please just confirm look?

11

The look is great!

12

@Gabriellesimard

thanks for confirm please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
.template-blog main.main-content .grid__item.large--five-sixths.push--large--one-twelfth {
    width: 100%;
    left: 0;
}
.template-blog main.main-content article.article.grid.small--text-center {
    width: calc(33.3333% - 15px);
    float: left;
    margin: 0px 7px;
}
.template-blog main.main-content hr {
    display: none;
}
.template-blog main.main-content article.article.grid.small--text-center .grid__item {
    padding-left: 0;
    width: 100%;
}
.article__featured-image-wrapper {
    padding-top: 100% !important;
}
.article__featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
}

After Code result

KetanKumar_0-1636274538883.png
KetanKumar_0-1636274538883.png1920×1080 375 KB

13

Its perfect! thank you so much!