💄 make the texts readable on small screens

src/app/app.component.html

@@ -1,4 +1,4 @@
-<main>
+<main class="p-md-2">
   <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-primary">
     <div class="container-fluid">
       <a class="navbar-brand" routerLink="/" href="#">

src/app/pages/landing-page/landing-page.component.html

@@ -31,7 +31,7 @@
     Exploring New Tools to Support Regional Foresight Initiatives
   </h2>
 
-  <div class="row mt-4 p-4">
+  <div class="row mt-4 p-2 p-sm-4">
     <p>
       From 2020 to 2022, twelve Regional Foresight exercises in the EU and neighbouring countries, provided a living
       laboratory for exploring the use of novel tools and techniques in highly participative approaches to local policy
@@ -42,7 +42,7 @@
       the Rural Attractiveness Explorer</a>
   </div>
   <div class="row mt-4">
-    <div class="col-8 p-5 bg-light">
+    <div class="col-8 p-3 p-sm-5 bg-light">
       <p>
         One of those systems employed a wide range of Text Mining and Machine learning techniques to support the work of
         readers and researchers tasked with discovering relevant information in large libraries of documents, with a
@@ -51,7 +51,7 @@
         This tool is called the <a href="https://semex.io/" target="_blank" rel="noopener">SEMANTIC EXPLORER (SE)</a>.
       </p>
     </div>
-    <div class="col-4 p-3">
+    <div class="col-4 p-1 p-sm-3">
       <div class="card shadow">
         <img class="card-image-top" src="assets/fig/ill-text-mining.jpeg" />
       </div>
@@ -64,10 +64,7 @@
       </div>
     </div>
 
-    <div class="col-8 p-5 bg-light">
-      <p>
-
-      </p>
+    <div class="col-8 p-3 p-sm-5 bg-light">
       <p>
         Our biggest effort was devoted to the use of System Dynamic Modelling or SDM, in a tool allowing normal citizens
         to explore the impact of different policy options on regional KPIs or indicators of performance. This tool is
@@ -76,7 +73,7 @@
     </div>
   </div>
   <div class="row mt-4">
-    <div class="col-8 p-5 bg-light">
+    <div class="col-8 p-3 p-sm-5 bg-light">
       <p>
         Our third tool is the <a routerLink="/rural-attractiveness-explorer/about">RURAL ATTRACTIVENESS EXPLORER
           (RAE)</a>. It connects the POE to a composite Index of Rural Attractiveness (RAI), allowing users to see how
@@ -90,7 +87,7 @@
     </div>
 
   </div>
-  <div class="row mt-4 p-4">
+  <div class="row mt-4 p-2 p-sm-4">
     <p>
       An important aspect of all of this work was to better understand how one can help non-experts, as opposed to
       professional economists, statisticians, and modellers, to better understand how the world is changing, how the
@@ -98,7 +95,7 @@
       intention of being able to take part in a meaningful and impactful local policy process.
     </p>
   </div>
-  <div class="row mt-4 p-4">
+  <div class="row mt-4 p-2 p-sm-4">
     <p>
       To find out more, the reader is invited to follow the links to our pages on
     </p>

src/styles.scss

@@ -108,8 +108,7 @@ button:focus {
 }
 
 main {
-  padding: 1em;
-  max-width: 240px;
+  min-width: 240px;
   margin: 0 auto;
 }
 
@@ -131,11 +130,11 @@ div.has-fixed-header li {
   font-weight: 150;
 }
 
-@media (min-width: 640px) {
+/*@media (min-width: 640px) {
   main {
     max-width: none;
   }
-}
+}*/
 
 .fixed-top-2 {
   margin-top: 74px;