Adjust number of products per row for different viewport widths

Suggestion by @itbabu. Part of #1569
django-oscar · Dec 1, 2014 · 7465e41 · 7465e41
1 parent 1b651ea
commit 7465e41
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/oscar/templates/oscar/catalogue/browse.html b/oscar/templates/oscar/catalogue/browse.html
@@ -95,7 +95,7 @@ <h4>{% trans "Refine by" %}</h4>
             <div>
                 <ol class="row">
                     {% for product in products %}
-                        <li class="col-sm-3">{% render_product product %}</li>
+                        <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
                     {% endfor %}
                 </ol>
                 {% include "partials/pagination.html" %}

diff --git a/oscar/templates/oscar/catalogue/detail.html b/oscar/templates/oscar/catalogue/detail.html
@@ -183,7 +183,7 @@ <h2>{% trans "Recommended items" %}</h2>
             </div>
             <ul class="row">
                 {% for product in recommended_products %}
-                <li class="col-sm-2 {% if forloop.counter0|divisibleby:"6" %}no-margin{% endif %}">
+                <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
                     {% render_product product %}
                 </li>
                 {% endfor %}

diff --git a/oscar/templates/oscar/customer/history/recently_viewed_products.html b/oscar/templates/oscar/customer/history/recently_viewed_products.html
@@ -9,7 +9,7 @@ <h2>{% trans 'Products you recently viewed' %}</h2>
 
         <ul class="row">
             {% for product in products_sliced %}
-                <li class="col-sm-2 {% if forloop.counter0|divisibleby:"6" %}no-margin{% endif %}">{% render_product product %}</li>
+                <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
             {% endfor %}
         </ul>
     {% endif %}

diff --git a/oscar/templates/oscar/offer/detail.html b/oscar/templates/oscar/offer/detail.html
@@ -51,7 +51,7 @@ <h2 class="h4"><i class="icon-exclamation-sign icon-large"></i> {% trans "What y
                 {% include "partials/pagination.html" %}
                 <ol class="row">
                     {% for product in products %}
-                    <li class="col-sm-2 {% if forloop.counter0|divisibleby:"6" %}no-margin{% endif %}">{% render_product product %}</li>
+                    <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
                     {% endfor %}
                 </ol>
                 {% include "partials/pagination.html" %}

diff --git a/oscar/templates/oscar/offer/list.html b/oscar/templates/oscar/offer/list.html
@@ -33,7 +33,7 @@ <h2>{{ offer.name }}</h2>
         {% if offer.has_products %}
             <ul class="row">
                 {% for product in offer.products|slice:":12" %}
-                <li class="col-sm-2 {% if forloop.counter0|divisibleby:"6" %}no-margin{% endif %}">{% render_product product %}</li>
+                <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
                 {% endfor %}
             </ul>
             <p>

diff --git a/oscar/templates/oscar/offer/range.html b/oscar/templates/oscar/offer/range.html
@@ -30,7 +30,7 @@
             <div>
                 <ol class="row">
                     {% for product in products %}
-                        <li class="col-sm-2 {% if forloop.counter0|divisibleby:"6" %}no-margin{% endif %}">{% render_product product %}</li>
+                        <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
                     {% endfor %}
                 </ol>
                 {% include "partials/pagination.html" %}

diff --git a/oscar/templates/oscar/promotions/baseproductlist.html b/oscar/templates/oscar/promotions/baseproductlist.html
@@ -11,7 +11,7 @@ <h3>{{ promotion.name }}</h3>
 
     <ul class="row">
         {% for product in products %}
-        <li class="col-sm-3 {% if forloop.counter0|divisibleby:"4" %}no-margin{% endif %}">{% render_product product %}</li>
+        <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
         {% endfor %}
     </ul>
 

diff --git a/oscar/templates/oscar/search/results.html b/oscar/templates/oscar/search/results.html
@@ -82,7 +82,7 @@ <h4>{% trans "Refine your search" %}</h4>
             <div>
                 <ol class="row">
                     {% for result in page.object_list %}
-                        <li class="col-sm-3 {% if forloop.counter0|divisibleby:"4" %}no-margin{% endif %}">{% render_product result.object %}</li>
+                        <li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product result.object %}</li>
                     {% endfor %}
                 </ol>
                 {% include "partials/pagination.html" with page_obj=page %}