<p>I wouldn't use Craft's <code>isMobileBrowser</code> detection here. It's the <strong>viewport width</strong> you are actually interested in and not whether the visitors is viewing your site from a mobile, tablet or desktop device. </p>

<p>So what I'd do instead is to add a css class to the last item in each row and
hide that item for the viewport widths in question with css. </p>

<pre><code>{% for batch in craft.entries.section('afval')|batch(3) %}
    &lt;div class="row"&gt;
        {% for item in batch %}
            {% set lastItemClass = loop.last ? 'col-xs-hidden' %}

            &lt;div class="col-xs-6 col-md-4 {{ lastItemClass }}"&gt;
            &lt;/div&gt;
        {% endfor %}
    &lt;/div&gt;
{% endfor %}
</code></pre>



<pre><code>.col-xs-hidden {display: none;}

@media (min-width: @screen-md-min) {
  .col-xs-hidden {display: block;}
}
</code></pre>

CC BY-SA 3.0
2015-08-31T12:34:15.253Z
This seems to be a very good solution but the problem is that I actually do need to show it in batches of 2 on mobile / tablet not on any sort of desktop device so Paul's solution fits more for my problem. Thank you for the answer though really appreciate it :D
Justin Dekkers
CC BY-SA 3.0
2015-08-31T12:42:41.300Z
Hmm... that's exactly what the code does. It shows it in batches of 2, and on all browser with a viewport widths with 992px and above you have batches of 3.
carlcs
CC BY-SA 3.0
2015-08-31T12:47:37.197Z
There might be huge tablets that Craft classifies as mobile devices and tiny laptops or people having their browser windows very narrow that you're serving the 3 items per row because Craft cannot know about the width. And don't you use Bootstraps breakpoints for other things and want to have this batches detail play nicely with those?
carlcs
CC BY-SA 3.0
2015-08-31T12:20:06.917Z
2015-09-01T22:39:33.497Z
2015-09-01T22:39:33.497Z
carlcs
<p>You should close your for-tag pair within the <code>{% if ... %}</code>.</p>

<p>So:</p>

<pre><code>{% if craft.request.isMobileBrowser %}
    {% for batch in craft.entries.section('afval')|batch(2) %}
        ...
    {% endfor %}
{% else %}
    {% for batch in craft.entries.section('afval')|batch(3) %}
        ...
    {% endfor %}
{% endif %}
</code></pre>

<p>Or, even better:</p>

<pre><code>{% set batch = craft.request.isMobileBrowser ? 2 : 3 %}

{% for batch in craft.entries.section('afval') | batch(batch) %}
    ...
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-08-31T11:14:27.927Z
The last was code did it! Thank you so much!
Justin Dekkers
CC BY-SA 3.0
2015-08-31T10:35:45.230Z
2015-08-31T10:35:45.230Z
Paul
<p>I have a loop to go through my products which go in batches because they need to show detail info every third entry. When the Website is viewed from a mobile device, Tablet or Mobile I want it to loop in Batches of 2 instead of 3.</p>

<p>All I get when I make an "if" statement is errors about the for loop not closing.</p>

<pre><code>    {% if craft.request.isMobileBrowser %}
        {% for batch in craft.entries.section('afval')|batch(2) %}
    {% else %}
        {% for batch in craft.entries.section('afval')|batch(3) %}
    {% endif %}
    lots of content here...
    {% endfor %}
</code></pre>

<p><strong>So how can I get the loop to go in 2 entries per batch instead of 3 when reached "col-sm"(bootstrap) or atleast when a mobile device is detected.</strong></p>

<entries><forloop>
Is it possible to change a loop if mobile browser is detected?
# Is it possible to change a loop if mobile browser is detected?

(Asked by: username_0 on 2015-08-31)

I have a loop to go through my products which go in batches because they need to show detail info every third entry. When the Website is viewed from a mobile device, Tablet or Mobile I want it to loop in Batches of 2 instead of 3.
All I get when I make an "if" statement is errors about the for loop not closing.
    {% if craft.request.isMobileBrowser %}
        {% for batch in craft.entries.section('afval')|batch(2) %}
    {% else %}
        {% for batch in craft.entries.section('afval')|batch(3) %}
    {% endif %}
    lots of content here...
    {% endfor %}

So how can I get the loop to go in 2 entries per batch instead of 3 when reached "col-sm"(bootstrap) or atleast when a mobile device is detected.

**Tags:** entries, forloop


---

## 2 answers

### Answer by username_2 on 2015-08-31. Score: 6 | Accepted answer

You should close your for-tag pair within the {% if ... %}.
So:
{% if craft.request.isMobileBrowser %}
    {% for batch in craft.entries.section('afval')|batch(2) %}
        ...
    {% endfor %}
{% else %}
    {% for batch in craft.entries.section('afval')|batch(3) %}
        ...
    {% endfor %}
{% endif %}

Or, even better:
{% set batch = craft.request.isMobileBrowser ? 2 : 3 %}

{% for batch in craft.entries.section('afval') | batch(batch) %}
    ...
{% endfor %}

> **Comments:**
> **username_0**: The last was code did it! Thank you so much!  

---

### Answer by username_1 on 2015-08-31. Score: 3

I wouldn't use Craft's isMobileBrowser detection here. It's the viewport width you are actually interested in and not whether the visitors is viewing your site from a mobile, tablet or desktop device. 
So what I'd do instead is to add a css class to the last item in each row and
hide that item for the viewport widths in question with css. 
{% for batch in craft.entries.section('afval')|batch(3) %}
    
        {% for item in batch %}
            {% set lastItemClass = loop.last ? 'col-xs-hidden' %}

            
            
        {% endfor %}
    
{% endfor %}

.col-xs-hidden {display: none;}

@media (min-width: @screen-md-min) {
  .col-xs-hidden {display: block;}
}

> **Comments:**
> **username_0**: This seems to be a very good solution but the problem is that I actually do need to show it in batches of 2 on mobile / tablet not on any sort of desktop device so username_2's solution fits more for my problem. Thank you for the answer though really appreciate it :D  
> **username_1**: Hmm... that's exactly what the code does. It shows it in batches of 2, and on all browser with a viewport widths with 992px and above you have batches of 3.  
> **username_1**: There might be huge tablets that Craft classifies as mobile devices and tiny laptops or people having their browser windows very narrow that you're serving the 3 items per row because Craft cannot know about the width. And don't you use Bootstraps breakpoints for other things and want to have this batches detail play nicely with those?  

---

