How to get 3 blog columns on brooklyn theme

Gabriellesimard
Tourist
9 0 6

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

Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11972

@Gabriellesimard 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gabriellesimard
Tourist
9 0 6

heres my store URL:

https://mybestfriendchies.com/

Thank you!!!

KetanKumar
Shopify Partner
36839 3635 11972

@Gabriellesimard 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gabriellesimard
Tourist
9 0 6

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

Ecommpremium
Shopify Partner
512 43 93

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

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Gabriellesimard
Tourist
9 0 6

this is the blog.liquid code

 

<!-- /templates/blog.liquid -->
{% paginate blog.articles by 15 %}

<div class="grid">

<div class="grid__item large--five-sixths push--large--one-twelfth">

<header class="section-header text-center">
<h1>
{% if current_tags %}
{{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}
{% else %}
{{ blog.title }}
{% endif %}
<a href="{{ shop.url }}{{ blog.url }}.atom" class="icon-fallback-text rss-link">
<span class="icon icon-rss" aria-hidden="true"></span>
<span class="fallback-text">RSS</span>
</a>
</h1>
<hr class="hr--small">
</header>

{% for article in blog.articles %}

{% assign article_content = article.excerpt_or_content %}

<article class="article grid small--text-center">

{% unless article.image == blank %}
<div class="grid__item">
<a class="article__featured-image-link" href="{{ article.url }}">
<noscript>
{{ article.image | img_url: '200x200' | img_tag: article.title | escape }}
</noscript>
<div class="article__featured-image-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
{% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="article__featured-image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ article.title | escape }}">
</div>
</a>
</div>
{% endunless %}

<div class="grid__item large--two-tenths push--large--one-tenth">
<time datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}" class="date">{{ article.published_at | date: format: 'date' }}</time>
<hr class="hr--small hr--left small--hide">
</div>
<div class="grid__item large--six-tenths push--large--one-tenth">
<h2 class="h3"><a class="article__heading-link" href="{{ article.url }}">{{ article.title }}</a></h2>
<div class="rte rte--indented-images">
{{ article_content | strip_html | truncatewords: 120 }}
</div>

<p>
<a href="{{ article.url }}" class="text-link">{{ 'blogs.article.read_more' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span></a>
</p>

{% if article.tags.size > 0 %}
<ul class="tags tags--article inline-list">
{% include 'tags-article' %}
</ul>
{% endif %}
</div>
</article>

{% unless forloop.last %}<hr class="hr--clear">{% endunless %}

{% endfor %}

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

</div>
</div>

{% endpaginate %}

KetanKumar
Shopify Partner
36839 3635 11972

@Gabriellesimard 

can you please confirm this look

KetanKumar_0-1636174042337.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gabriellesimard
Tourist
9 0 6

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

KetanKumar
Shopify Partner
36839 3635 11972

@Gabriellesimard 

Yes its that possible can you please just confirm look?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gabriellesimard
Tourist
9 0 6

The look is great!

KetanKumar
Shopify Partner
36839 3635 11972

@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

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Gabriellesimard
Tourist
9 0 6

Its perfect! thank you so much!