Blog featured images not showing in mobile

Highlighted
New Member
2 0 0

Hi guys, 

I hope someone can help me with this. I'm trying to add my featured blog images to show in mobile view on my homepage. It shows on desktop view but not on the mobile. Here the code from the: featured-blog.liquid > sections

<div id="home-blog" class="index-section home-section">
    <div class="home-blog">
        <div class="wrapper wrapper--margins">
        {%- assign blog = blogs[section.settings.blog] -%}

            {% if blogs[section.settings.blog] != blank %}

              {% if section.settings.title != blank %}
                <h2 class="home-section-title">{{ section.settings.title | escape }}</h2>
        
          
              {% endif %}
          

            {% paginate blog.articles by section.settings.post_limit %}

            <div class="blog-list">

                {% for article in blog.articles %}
                  {% include 'blog_item' with blog.comments_enabled? %}
                {% endfor %}
             

            </div>

            {% if paginate.next.is_link %}
              <p class="text-center"><a class="btn btn--large btn--outline btn--dark" href="{{ blog.url }}">More posts</a></p>
            {% endif %}

            {% endpaginate %}

            {% else %}

            <!-- onboarding -->
            <div class="onboarding">
                <h2 class="home-section-title">{{ 'homepage.onboarding.section_title' | t }}</h2>
                <p>{{ 'homepage.onboarding.no_content' | t }}</p>
            </div>

            {% endif %}

        </div>
    </div>
</div>

{% schema %}
    {
        "name": "Blog posts",
        "settings": [
            {
                "type": "text",
                "id": "title",
                "label": "Header",
                "default": "Blog"
            },
            {
                "id": "blog",
                "type": "blog",
                "label": "Blog"
            },
            {
                "type": "range",
                "id": "post_limit",
                "label": "Posts",
                "min": 1,
                "max": 3,
                "step": 1,
                "default": 3
            }
        ],
        "presets": [
            {
                "name": "Blog posts",
                "category": "Blog",
                "settings": {
                    "blog": "News"
                }
            }
        ]
    }
{% endschema %}

Hope someone can help I've been trying to figure this out for the past few days. 
 

0 Likes
Highlighted
Shopify Partner
20 2 8

You must change some CSS rules or remove some classes.

Code above does not matter. Place here code from /snippets/blog_item.liquid file.

0 Likes
Highlighted
New Member
2 0 0

Hi Tomasz. Ok here's the code from the /snippets/blog_item.liquid file

{% assign blog_comments = blog_item %}

<a class="article {% unless article.image %} no-image {% endunless %}" href="{{ article.url }}">

  <div class="article__content display-table">

    <div class="display-table-cell">

      <h2 class="h3 article__title">{{ article.title }}</h2>

      {% if article.image %}
        <figure class="article__img lazyload no-js"
          data-bgset="{% include 'bgset', image: article.image %}"
          data-widths="[220,440,880]"
          data-sizes="auto"
          data-parent-fit="cover">
        </figure>  
        <noscript>
        <figure class="article__img" style="background-image:url('{{ article.image | img_url: '440x440', scale: 2 }}')">
          <img src="{{ article.image | img_url: '440x440' }}"
            srcset="{{ article.image | img_url: '440x440' }} 1x, {{ article.image | img_url: '440x440', scale: 2 }} 2x"
            alt="{{ article.image.alt }}">
          </figure>
        </noscript>
      {% endif %}

      {% include 'blog_meta' with blog_comments %}

      <div class="article__excerpt rte">
        <p>{{ article.excerpt_or_content | strip_html | truncatewords: 25 }}</p>
      </div>

    </div>

  </div>

</a>
 

 

0 Likes
Highlighted
Shopify Expert
9925 103 1763

Any reason why you can't give a link to the page with issues? It's far easier to troubleshoot things when the site can be seen live. Images not loading could come from a series of different things - many that your code above won't cover.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
2 0 0

I'm having the same issue. Can you please help? My store is www.lazagna.co

0 Likes