Show one blog post on mobile, and 3 on pc

IshayFr
New Member
3 0 0

Hi, I want my store (https://gemdrives.co.il) to show the blog posts in the homepage just the way it is now, but on mobile, to show only one featured blog post, and a button for more articles.

 

I know I can hire a Shopify expert, but I am trying to do it by myself, I have a little background in coding.

 

So in my featured-blog file, I was trying to replace

 

<ul class="grid grid--uniform grid--blog">
      {% for article in blog.articles limit: section.settings.post_limit %}
        <li class="grid__item medium-up--one-third">

... and on and on

 

with

<ul class="grid grid--uniform grid--blog">

<script>  
    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|webOS|BlackBerry|IEMobile|Opera Mini)/i);
    if(isMobile){      
      {% for article in blog.articles limit: 1 %}
    }else{      
      {% for article in blog.articles limit: section.settings.post_limit %}
    }
    </script>
        <li class="grid__item medium-up--one-third">

... and on and on

and it isn't working, I guess I implemented the idea the wrong way, and also, this code doesn't provide the button for all of the blog posts, but I guess i will be able to add it easily once I understand the idea.

 

Would appreciate any help. Thank you, Ishay.

0 Likes
Barranger
New Member
2 0 1

What I believe you are missing is that the liquid is running on the server, while the javascript is running on the client, making for a bit of a mess. 

The one thing you could do is add css classes and go from there.

0 Likes
IshayFr
New Member
3 0 0

I would prefer it to load or not load rather than hide or show in CSS,

rather case, I need to see the practical way to do it.

 

Thank you though.

0 Likes