improved mobile views

artel/artel/templates/base.html

@@ -37,10 +37,10 @@
         {% wagtailuserbar %}
         <div class="container">
             <div class="row">
-                <div class="col-3">
+                <div class="col-md-3 mt-5 ml-2">
                     {% main_menu max_levels=3 template="menu/custom_main_menu.html" %}
                 </div>
-                <div class="col-9 mt-5 ml-2">
+                <div class="col-md-9 mt-5 ml-2">
                     {% block content %}{% endblock %}
                 </div>
             </div>

artel/artel/templates/menu/custom_main_menu.html

@@ -1,9 +1,9 @@
-{% load static %} 
+{% load static %}
 {% load menu_tags %}
 
 
-<div class="d-flex flex-column flex-shrink-0 p-3 mr-5" style="width: 280px;">
-    <img src="{% static 'images/icons/las_ruinas_PL.png' %}" class="rounded mx-auto d-block mt-3"/>
+<div class="d-flex flex-column flex-shrink-0 p-3 mr-5">
+    <img src="{% static 'images/icons/las_ruinas_PL.png' %}" class="img-fluid rounded mx-auto d-block mt-3" style="width: 10rem; height: 10 rem;" alt="Portal Logo"/>
     <hr>
     <ul class="nav navbar-nav">
     {% for item in menu_items %}
@@ -11,12 +11,12 @@
             <a href="{{ item.href }}">{{ item.text }}</a>
             {% if item.has_children_in_menu %}
                 <button class="btn btn-toggle" data-bs-target="#ddtoggle_{{ item.link_page.pk }}" data-bs-toggle="collapse"
-                    aria-expanded={% if item.active_class %}"true" {% else %} "false" {% endif %} 
+                    aria-expanded={% if item.active_class %}"true" {% else %} "false" {% endif %}
                     aria-controls="#ddtoggle_{{ item.link_page.pk }}">
                     <img src = "{% static 'images/icons/caret-down.svg' %}" alt="&or;"/>                </button>
                 {% sub_menu item  template="menu/custom_submenu.html" %}
             {% endif %}
-        </li>       
+        </li>
     {% endfor %}
     </ul>
 

artel/store/templates/store/partials/product_card.html

@@ -1,18 +1,22 @@
-{% load static %} 
+{% load static %}
 
 
-  <div class="card h-100" style="width: 15rem;">
-    <div class="card-header">{{item.title}}</div>
-    <div class="card-body">
-      <img src="{{item.main_image.url}}" class="rounded mx-auto d-block" style="width: 10rem; height: 10 rem;">
+<div class="card h-100">
+  <div class="card-header">{{item.title}}</div>
+  <div class="card-body">
+      <img src="{{item.main_image.url}}" class="img-fluid rounded mx-auto d-block" style="width: 10rem; height: 15rem;" alt="{{item.title}}">
       <p class="card-text">{{item.description}}</p>
-              
-      <div class="text-end">
-        <a href="#" class="btn btn-outline-primary">Details</a>
-        <a href="#" class="btn btn-outline-success">
-            <img src = "{% static 'images/icons/cart.svg' %}" alt="Koszyk"/>
-        </a>
-      </div>
-    </div>
   </div>
-  
+  <div class="card-footer container">
+          <div class="row justify-content-end ">
+              <div class="col-md-9 p-0 text-end text-truncate">
+                  <a href="#" class="btn btn-outline-primary">Details</a>
+              </div>
+              <div class="col-md-3 p-0 text-end">
+                  <a href="#" class="btn btn-outline-success">
+                      <img src="{% static 'images/icons/cart.svg' %}" alt="Koszyk" />
+                  </a>
+              </div>
+      </div>
+  </div>
+</div>

artel/store/templates/store/product_list_page.html

@@ -4,14 +4,13 @@
 {% block content %}
 
 <div class="container mb-3">
-    <div class="row row-cols-1 row-cols-md-3 g-4">
-        {% for item in items %}
-            <div class="col">
-                {% include 'store/partials/product_card.html' %}
-            </div>
-        {% endfor %}
-    </div>
-
+  <div class="row row-cols-3 g-4">
+      {% for item in items %}
+          <div class="col-md-4">
+              {% include 'store/partials/product_card.html' %}
+          </div>
+      {% endfor %}
+  </div>
 </div>
 
 <nav aria-label="Page navigation example">