Adding multiple columns for Brooklyn theme Blog page

Solved
Tourist
3 1 1

I am using the Brooklyn theme with blog posts. The main blog page is one wide column and I would like it to have 3 columns and be responsive. I have knowledge of HTML/CSS and I've quickly picked up on liquid and how themes are set up here. 

 

Can anyone help me get the articles to wrap side by side instead of stacking on top of each other? See my blog page: https://megacovenart.com/blogs/mega-coven-art

 

Below is the code I've been trying to work with in blog.liquid. Should I be adding some custom CSS styling to help clear each article so they sit side by side? 

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

<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 small--one-whole medum--one-half large--one-third">
            <a class="article__featured-image-link" href="{{ article.url }}">
              <noscript>
                {{ article.image | img_url: '2048x2048' | 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 class="grid__item large--one-whole" style="padding-left:0px;">
          <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 | truncatecharacters: 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>
          </div>
        {% endunless %}

        
      </article>

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

    {% endfor %}

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

  </div>
</div>

{% endpaginate %}
0 Likes
Highlighted

Success.

Tourist
3 1 1

Nevermind! I found a different solution that I'm happy with.

1 Like
Highlighted
New Member
2 0 0

Hello !

 

I also want my items to be side by side instead of being impaled.

I do not find satisfactory solutions for the moment.

 

Could you share me your solutions? :)

 

Thank you,

 

TIPREZ Paco

 

0 Likes
Highlighted
Tourist
3 1 1

I actually switched to the Narrative theme. It's somewhat similar to Brooklyn, but has more customization options like the Blog page.

0 Likes
Highlighted
New Member
2 0 0
Ok thank you ^^ I'll see it can be nice :)

Good day!

TIPREZ Paco


##- S'il vous plait, écrivez votre réponse au-dessus de cette ligne -##
0 Likes