Improve catalog mobile layout

clarin-eric · Oct 10, 2024 · 09a5e5b · 09a5e5b
1 parent 077e8a9
commit 09a5e5b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/scss/modules/field.scss b/scss/modules/field.scss
@@ -57,11 +57,11 @@
       float: right;
       margin-left: 15px;
     }
-  }
 
-  a.field.field--name-field-k-centre-website-url.field--type-link {
-    margin-left: 1rem;
-    margin-right: 5rem;
+    a.field.field--name-field-k-centre-website-url.field--type-link {
+      margin-left: 1rem;
+      margin-right: 5rem;
+    }
   }
 
   .field--name-field-centre-contact-email::before {

diff --git a/templates/content/node--k-centre-profile--search-result.html.twig b/templates/content/node--k-centre-profile--search-result.html.twig
@@ -114,24 +114,24 @@
     {% endif %}
     {% if content.field_resource_families.0 %}
       <div class="resource_families_fields row">
-        <div class="col-3 p-3 my-auto">
+        <div class="col-sm-3 p-sm-3 my-auto">
           <a href="/resource-families">
             <img src="/themes/contrib/clarin_bootstrap/images/resource-families-logo.jpg" alt="CLARIN Resource Familes logo, linking to the 'Resource Familes' section of this website">
           </a>
         </div>
-        <div class="col-9 pt-3 my-auto">
+        <div class="col-sm-9 p-0 pt-sm-3 my-auto">
           <div class="field--label-inline">{{ content.field_resource_families }}</div>
         </div>
       </div>
     {% endif %}
     {% if content.field_tour_de_clarin_intro.0 or content.field_tour_de_clarin_interview.0 %}
       <div class="tour_de_clarin_fields row">
-        <div class="col-3 p-0 my-auto">
+        <div class="col-sm-3 p-0 my-auto">
           <a href="/Tour-de-CLARIN">
             <img src="/themes/contrib/clarin_bootstrap/images/tour-de-clarin-logo.png" alt="Tour de CLARIN logo, linking to the 'Tour de CLARIN' section of this website" >
           </a>
         </div>
-        <div class="col-9 pt-3">
+        <div class="col-sm-9 p-0 pt-sm-3">
           <div class="field--label-inline"><div class="field__label">Introduction</div>{{ content.field_tour_de_clarin_intro.0 }}</div>
           <div class="field--label-inline"><div class="field__label">Interview</div>{{ content.field_tour_de_clarin_interview.0 }}</div>
         </div>