Blog columns? brooklyn

Highlighted
Tourist
15 0 2

Hey guys 

Im struggling to change my blog so it shows multiple posts in a grid rather than in 1 column. Ive tried a few things including the following but nothing seams to work. 

https://community.shopify.com/c/Shopify-Design/Brooklyn-theme-two-columns-of-blog/td-p/265757 

This is my page code and my page Bean & Leaf blog any help would be appreciated :)

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

<div class="grid">

  <div class="grid__item large two--one-third 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-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>
        {% endunless %}

        <div class="grid__item large--two-tenths push--large--one-tenth">
          <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}" class="date">{{ article.published_at | date: format: 'month_day_year' }}</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 href="{{ article.url }}">{{ article.title }}</a></h2>
          <div class="rte rte--indented-images">
            {% if article.content contains "<img" %}
  {% assign src=article.content | split: 'src="' %}
  {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}

  <img src="{{ src }}" alt="{{ article.title }}" />

{% endif %}
           
          </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 %}

Ps. would love to get rid of the stupid WiFi symbol next to the title as well...  

0 Likes
Highlighted
Pathfinder
98 12 32

Add this to the bottom of theme.scss.liquid 

.article {
    margin-bottom: 20px;
    width: 40%;
    display: inline-block !important;
    vertical-align: top;
}
.rss-link {
    display: none;
}
0 Likes
Highlighted
Shopify Partner
468 85 109

@zoltan360 

 

At first don't use the code that @JTR  shared, it is just a junk...

 

I have looked at your store, you have messed up there the codes, there is need to edit blog template to fix it, there are messy codes.

IWF9CrP

 

@JTR 

 

What are you doing, why to share this kind of code? inline-block ? width: 40%... really ? And after all what about responsiveness?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Tourist
15 0 2

Thanks @JTR but it didnt work. although you did point me to the RSS link being the issue for the WIFI symbol. I found the following and edited the font size to zero so now it doesnt show.  SO thanks for that! Still stuck on the grid issue though. As a note the previous code i tried from that link does make 2 columns but everything is everywhere and doesnt format at all. 

/*================ RSS ================*/
.rss-link {
  font-size: 0em;
  
}

0 Likes
Highlighted
Tourist
15 0 2

sorry @sarhov i was trying some things while it was live... its normal now. 


@sarhov wrote:

@zoltan360 

 

At first don't use the code that @JTR  shared, it is just a junk...

 

I have looked at your store, you have messed up there the codes, there is need to edit blog template to fix it, there are messy codes.

IWF9CrP

 

@JTR 

 

What are you doing, why to share this kind of code? inline-block ? width: 40%... really ? And after all what about responsiveness?


 

0 Likes
Highlighted
Shopify Partner
468 85 109

@zoltan360 

 

Okay, so I have written the code, it should make the blog posts 2 per row, also it is mobile/tablet optimized and stack on each other on mobile.

Go into edit code, open theme.scss.liquid file, scroll at the very bottom of this file and put the following code there.

.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;
  }
}
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Pathfinder
98 12 32

@sarhov  I shared it because it was basic, inline-block makes the articles display next to each other and 40% width let's them fit within the container, I wasn't sure if this was the way they wanted to go about solving it because it's a bit of a hack rather than doing it properly, either way I forgot to include bits in the code I posted that actually make it work, the whole point is so that people have options, I just offered something and if it works it works. @zoltan360 obviously use sarhov's code.

 

@media screen and (min-width: 769px) {
.section-header {
    width: 83%;
}
.article {
    margin-bottom: 20px;
    width: 40%;
    display: inline-block !important;
    vertical-align: top;
}
hr.hr--clear {
    display: none;
}
}
0 Likes
Highlighted
Shopify Partner
468 85 109

@JTR 

 

I know what is inline-block... ))

If you don't want spend time don't answer at all. We are here to help people but not to make their theme codes more dirty.

Yes I am ready to write even 100 lines of code just to achieve the result without any hacks.

We are all spending our time here, but it is your choice to spend a bit more but give a good code or quickly leave an answer just for an "answer".

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Pathfinder
98 12 32

@sarhov  That's fine but the whole point is to give people options, even though it's modifying the code to do something different to the way it was designed it achieves the end goal of displaying multiple articles on a line and it looks good now I've fixed the code... it's up to the user to use the code or not.

0 Likes
Highlighted
Tourist
15 0 2
@sarhov thanks mate, really appreciate the help with this. There's alot of old info online about the same things so hopefully this can help other to.
0 Likes