Narrative theme Blog grid

New Member
4 0 0

Hi

 

I was hoping someone might  be able to help me making the images in our blog grid larger, they are very small. We would also like an excerpt of the text underneath each image. Here's the blog section in liquid.

 

Thanks!

 

 

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

<div class="blog-template" data-section-id="{{ section.id }}" data-section-type="blog-template">
{% paginate blog.articles by limit %}

<div class="page-width">
<header class="section-header section-header--small text-center">
<h1 class="section-header__title h2">{{ page_title }}</h1>
</header>

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

<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}">
<div class="card-list__column grid__item {% if blog.articles.size == 1 %}card-list__column--center{% endif %} {{ gridClasses }}">
{% for article in blog.articles %}
{% include 'article-card', article: article, grid_style: section.settings.grid_style %}
{% endfor %}
</div>
</div>

{% if blog.articles.size == 0 %}
<p class="text-center">{{ 'blogs.article.no_matches' | t }}</p>
{% endif %}

{% if paginate.pages > 1 %}
<div class="card-list__sub-actions">
{% include 'pagination' %}
</div>
{% endif %}
</div>

{% endpaginate %}
</div>

0 Likes
Shopify Expert
665 170 199

Hi, @AmandaN ,

This is Evita from On The Map.

 

The code you proved is not much help. Can you add your store URL?

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0
Hi Evita,

Here's the url - https://www.attpynta.com/blogs/explore

Best
Amanda
0 Likes
Shopify Partner
100 20 17

Hello @AmandaN 

 

Go to Edit Code> Assets > theme.scss>

Add this code to your theme.scss:

 

@media only screen and (min-width: 750px)
.card--article .card__info {
    padding: 0px !important;
}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
Shopify Expert
665 170 199

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.card--article .card__info {
    padding: 0!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Thank you so much, this worked! Can I also ask, do you know how to add a bit of text excerpt underneath each image?

0 Likes
New Member
4 0 0

Thank you so much :)

0 Likes