Set of fixes to the gallery to handle small screens

stylesheets/cards.css

@@ -79,9 +79,33 @@
   margin-bottom: 0;
 }
 
+.gallery-card-img {
+  max-width: 90%;
+  display: flex;
+  flex: 1 1 auto;
+  /*border: 1px solid black; */
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.gallery-title {
+    text-align: center;
+    /* font-size: 2.0vw; */
+}
+
+.gallery-text {
+    margin-left: 5px;
+
+    width: 100%;
+    margin-bottom: 0.5em;
+    flex-grow: 0;
+    align-self: flex-end;
+}
+
 .gallery-card {
   width: 30%;
-  
+    
   border: 1px solid #555;
   border-radius: 4px;
 
@@ -97,7 +121,6 @@
   flex: 1 1 auto;
 }
 
-
 .caret {
   width: 100%;
   color: #298BDF;

templates/gallery.html

@@ -10,7 +10,7 @@
    {{ helper.navbar(navbar, link) }}
 
        <div class="text">
-         <h1>Image and Movie Gallery</h1>
+         <h2>Image and Movie Gallery</h2>
        </div>
 
        <div class="padder"></div>
@@ -18,10 +18,12 @@
        <div class="cards">
             {% for card in cards|sort_cards %}
                 <div class="gallery-card">
-                    <div class="card-content">
+                     <!-- <div class="gallery-card"> -->
                         <div>
 
-			    <h2> {{ card.title }}</h2>
+ 			    <div class="gallery-title"> 
+			      <h3> {{ card.title }}</h3>
+			    </div>
 			    {% if card.img %}
                             <div class="gallery-card-img">
 			      <a href="{{ card.img }}">
@@ -32,21 +34,21 @@
 				{% endif %}
 			      </a>
                             </div>
-			    <div>
+			    <div class="gallery-text">
                               Author(s): <b>{{ card.author }}</b>
 			    </div>
                             {% endif %}
                             {% if card.description %}
-                                <div>
+                                <div class="gallery-text">
                                     <p class="hideshow">Description <i class="fa fa-chevron-right" aria-hidden="true"></i></p>
                                     <p class="abstract card">{{ card.description }}</p>
                                 </div>
                             {% endif %}
 			    {% if card.link %}
-				<a href="{{ card.link }}">Related publication</a>
+				<a href="{{ card.link }}" class="gallery-text">Related publication</a>
 			    {% endif %}
 			</div>
-                    </div>
+                    <!-- </div> -->
                 </div>
             {% endfor %}
             {% for i in range(3 - (cards|length % 3)) %} {# Add extra padding #}