Single page layout for mobile

clarin-eric · Oct 10, 2024 · 0518f9d · 0518f9d
1 parent b9e95fc
commit 0518f9d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/scss/modules/field.scss b/scss/modules/field.scss
@@ -8,6 +8,8 @@ body .node--type-k-centre-profile, body .node--type-clarin-centre {
   .field:not(.field--name-field-k-centre-website-url, .field--name-field-centre-contact-email, .field--name-field-centre-contact-name,
     .field--name-field-centre-contact-telephone, .field--name-field-centre-contact-website-url, .field--name-field-centre-contact-eppn) {
     padding-bottom: 0.625rem;
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    padding-right: calc(var(--bs-gutter-x) * .5);
 
     p {
       margin: 0;

diff --git a/templates/content/node--k-centre-profile.html.twig b/templates/content/node--k-centre-profile.html.twig
@@ -64,19 +64,19 @@
             <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 my-auto pt-4">
+        <div class="col-9 my-auto p-0 pt-4">
           <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 pb-4">
-        <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 my-auto">
+        <div class="col-sm-9 p-0 my-auto">
           <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>