How to change items per row in Blog Section (VENTURE THEME)

[JLbyone]

Hi there, im trying to get 4 items per row with my blog's section in venture theme, can anyone help me? here is my blog.liquid file, i think have to use grid item class with one quarter... but dont know how to change it..

{% paginate blog.articles by 5 %}

<div class="page-width">

  <h1>
    {% if current_tags %}
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
    <a href="{{ shop.url }}{{ blog.url }}.atom" class="blog__rss-link link-accent-color">
      {% include 'icon-rss' %}
      <span class="icon__fallback-text">RSS</span>
    </a>
  </h1>

  <div class="grid">
    <div class="grid__item{% if blog.all_tags.size > 0 %} medium-up--three-quarters large-up--four-fifths{% endif %}">
      {% for article in blog.articles %}
        <div class="content-block">

          <p class="blog__meta">
            {% if article.tags.size > 0 %}
              {% for tag in article.tags %}
                <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="link-body-color"><strong>{{ tag }}</strong></a>{% if forloop.last %} - {% else %}, {% endif %}
              {% endfor %}
            {% endif %}
            {{ article.published_at | time_tag: format: 'date' }}
          </p>

          <h2 class="blog__title-link"><a href="{{ article.url }}">{{ article.title }}</a></h2>

          {% if article.image %}
            <div class="content-block__full-image content-block__full-image--large">
              <a href="{{ article.url }}">
                <noscript>
                  {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
                </noscript>
                <div class="article__photo-container">
                  <div class="article__photo-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="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>
                </div>
              </a>
            </div>
          {% endif %}

          <div class="rte rte--indented-images">
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
            {% endif %}
          </div>

          <p><a href="{{ article.url }}"><strong>{{ 'blogs.article.read_more' | t }}</strong></a></p>

        </div>
      {% endfor %}
    </div>
    {% if blog.all_tags.size > 0 %}
      <div class="grid__item medium-up--one-quarter large-up--one-fifth small--hide">
        <div class="content-block content-block--small">
          <h6 class="content-block__title">{{ 'blogs.article.tags' | t }}</h6>
          <ul class="list--no-bullets list--bold">
            <li>
              <a href="{{ blog.url }}">{{ 'blogs.article.all_tags' | t }}</a>
            </li>
            {% for tag in blog.all_tags %}
              {% if current_tags contains tag %}
              <li>{{ tag }}</li>
              {% else %}
              <li>{{ tag | link_to_tag: tag }}</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>

  {% section 'featured-products-subsection' %}

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}

[FrankMoore]

Hi,
Replace with the code below

{% paginate blog.articles by 5 %}

<div class="page-width">

  <h1>
    {% if current_tags %}
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
    <a href="{{ shop.url }}{{ blog.url }}.atom" class="blog__rss-link link-accent-color">
      {% include 'icon-rss' %}
      <span class="icon__fallback-text">RSS</span>
    </a>
  </h1>

  <div class="grid">
    <div class="grid__item{% if blog.all_tags.size > 0 %} medium-up--one-quarter small--one-half{% endif %}">
      {% for article in blog.articles %}
        <div class="content-block">

          <p class="blog__meta">
            {% if article.tags.size > 0 %}
              {% for tag in article.tags %}
                <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="link-body-color"><strong>{{ tag }}</strong></a>{% if forloop.last %} - {% else %}, {% endif %}
              {% endfor %}
            {% endif %}
            {{ article.published_at | time_tag: format: 'date' }}
          </p>

          <h2 class="blog__title-link"><a href="{{ article.url }}">{{ article.title }}</a></h2>

          {% if article.image %}
            <div class="content-block__full-image content-block__full-image--large">
              <a href="{{ article.url }}">
                <noscript>
                  {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
                </noscript>
                <div class="article__photo-container">
                  <div class="article__photo-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="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>
                </div>
              </a>
            </div>
          {% endif %}

          <div class="rte rte--indented-images">
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
            {% endif %}
          </div>

          <p><a href="{{ article.url }}"><strong>{{ 'blogs.article.read_more' | t }}</strong></a></p>

        </div>
      {% endfor %}
    </div>
    {% if blog.all_tags.size > 0 %}
      <div class="grid__item medium-up--one-quarter large-up--one-fifth small--hide">
        <div class="content-block content-block--small">
          <h6 class="content-block__title">{{ 'blogs.article.tags' | t }}</h6>
          <ul class="list--no-bullets list--bold">
            <li>
              <a href="{{ blog.url }}">{{ 'blogs.article.all_tags' | t }}</a>
            </li>
            {% for tag in blog.all_tags %}
              {% if current_tags contains tag %}
              <li>{{ tag }}</li>
              {% else %}
              <li>{{ tag | link_to_tag: tag }}</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>

  {% section 'featured-products-subsection' %}

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}

[JLbyone]

hi sir! it dont do nothing, just thinking probably i have to give other code? cause i was speaking about blog section in home page

[JLbyone · Accepted solution]

Okay, i got it!

for anyone need to change that, go to featured-articles.liquid and find that code:

{% assign blog = blogs[section.settings.blog] %}

{%  case section.settings.post_limit %}
  {% when 3 %}
    {%- assign width = 'small--one-whole medium-up--one-third' -%}
  {% when 2 %}
    {%- assign width = 'small--one-whole medium-up--one-half' -%}
  {% when 1 %}
    {%- assign width = 'small--one-whole medium-up--one-whole' -%}
  {% else %}
    {%- assign width = 'small--one-whole medium-up--one-third' -%}
{% endcase %}

and replace with this:

{% assign blog = blogs[section.settings.blog] %}

{%  case section.settings.post_limit %}
  {% when 4 %}
    {%- assign width = 'small--one-whole medium-up--one-quarter' -%}
  {% when 3 %}
    {%- assign width = 'small--one-whole medium-up--one-third' -%}
  {% when 2 %}
    {%- assign width = 'small--one-whole medium-up--one-half' -%}
  {% when 1 %}
    {%- assign width = 'small--one-whole medium-up--one-whole' -%}
  {% else %}
    {%- assign width = 'small--one-whole medium-up--one-third' -%}
{% endcase %}

Now in the same file: we're going to change schema code, find that:

"type": "range",
      "id": "post_limit",
      "label": {
        "cs": "Příspěvky",
        "da": "Opslag",
        "de": "Beiträge",
        "en": "Posts",
        "es": "Publicaciones",
        "fi": "Julkaisut",
        "fr": "Articles",
        "hi": "पोस्ट",
        "it": "articoli",
        "ja": "投稿",
        "ko": "게시물",
        "nb": "Innlegg",
        "nl": "Berichten",
        "pl": "Posty",
        "pt-BR": "posts",
        "pt-PT": "Publicações",
        "sv": "Inlägg",
        "th": "โพสต์",
        "tr": "Gönderiler",
        "vi": "Bài viết",
        "zh-CN": "文章",
        "zh-TW": "貼文"
      },
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 3
    }
  ],

we're going to change the post limit, so we can change number of posts showed at homepage in the customizer theme 

"type": "range",
      "id": "post_limit",
      "label": {
        "cs": "Příspěvky",
        "da": "Opslag",
        "de": "Beiträge",
        "en": "Posts",
        "es": "Publicaciones",
        "fi": "Julkaisut",
        "fr": "Articles",
        "hi": "पोस्ट",
        "it": "articoli",
        "ja": "投稿",
        "ko": "게시물",
        "nb": "Innlegg",
        "nl": "Berichten",
        "pl": "Posty",
        "pt-BR": "posts",
        "pt-PT": "Publicações",
        "sv": "Inlägg",
        "th": "โพสต์",
        "tr": "Gönderiler",
        "vi": "Bài viết",
        "zh-CN": "文章",
        "zh-TW": "貼文"
      },
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3
    }
  ],

and that's it!