3 blog posts in one row on blog page on desktop - Narrative Theme

[islandekopantry]

Hi,

I’ve been trying to change 2 blog posts to 3 blog posts in one row on my blog page on desktop, and I was playing with the following code in the blog-template liquid, but I couldn’t figure it out.

{% if desktopColumns == ‘3’ %}medium-up–one-third {% else %}medium-up–one-half {% endif %}

When I changed one-half to one-third in the above coding, this is what happened in the photos below (the third column is empty).

Can anyone help? Here’s the link to my site.

https://islandekopantry.com/blogs/recipes?page=1

Thank you!

[suyash1]

@islandekopantry - hello, have you added one more recipe to your blog? Since only 2 are visible, may be 3rd one is not added or home page is allowing only 2

we need to check code for it, changing one-half to one-third will add column but will not add recipe.

[islandekopantry]

Hi @suyash1 ,

Thank you so much for your quick response!

The thing is we have 10 recipes as blog posts so far, so what happened is below those 2 recipes follows more recipes. The third one appears in the second row instead of the third column in the first row.

The entire code for

[islandekopantry]

Sorry I pressed send button before I finished writing my reply ^^;

Here’s the entire code for the blog template liquid. Hope you can look into it and what you think!

Thank you so much.

{%- assign limit = section.settings.articles | times: section.settings.rows -%}

{% paginate blog.articles by limit %}

{{ page_title }}

{%- assign desktopColumns = section.settings.articles -%}
{%- assign mobileColumns = ‘1’ -%}

{%- capture gridClasses -%}
{% if desktopColumns == ‘3’ %}medium-up–one-third {% else %}medium-up–one-half {% endif %}
{% if mobileColumns == ‘2’ %}small–one-half {% endif %}
{%- endcapture -%}

{% for article in blog.articles %} {% include 'article-card', article: article, grid_style: section.settings.grid_style %} {% endfor %}

{% if blog.articles.size == 0 %}

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

{% endif %}

{% if paginate.pages > 1 %}

{% include 'pagination' %}

{% endif %}

{% endpaginate %}

[suyash1]

@islandekopantry - see this line - {%- assign desktopColumns = section.settings.articles -%}

it means you should have setting to et number of columns in the customizer, did you check it? or can you add me as collaborator? I will check it

[islandekopantry]

@suyash1 ,

Hi, I was reading about collaborators, but seems like you have to request to collaborate on my store so I can accept the request. Would you be able to do that? I’ve never done this collaborator thing, so I’m not too familiar.

[suyash1]

@islandekopantry - Good morning, I have sent you the request.

[islandekopantry]

@suyash1

Thank you! I approved your request.

[suyash1]

@islandekopantry - on my desktop I can see 3

[islandekopantry]

@suyash1

That is very odd as on my desktop it’s still 2 in a row. Also I noticed on your desktop, all the photos are aligned while on my desktop, the second photo is taller in height. Did you change any coding, or just as is?

[suyash1]

@islandekopantry - no I didnot change, I opened the page and it looked like screenshot hence did not change any.

[suyash1]

@islandekopantry - oh wait, it is my mistake actually, I checked home page recipes and not the ones on blog page… blog page still showing 2

I will check coding

[suyash1]

@islandekopantry - please check this page - https://islandekopantry.com/blogs/recipes?page=1

[islandekopantry]

I was actually looking at my website real time when it changed and I was very excited!

I don’t know where you changed it, but thank you so so much!! It looks better

[suyash1]

@islandekopantry - as I said you should have option in customizer, I did in from customize settings, you can see in in screenshot below

[islandekopantry]

Aw, you meant this as customizer. Somehow I wasn’t using that section that much that I forgot that it existed.

I feel silly now haha. But I really appreciate you saving my struggles!

[suyash1]

@islandekopantry - welcome, do let me know if you need anything, you have my email below.