Added responsive style

w3scout · Jul 20, 2023 · 78e12dd · 78e12dd
1 parent f82a173
commit 78e12dd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/contao/templates/mod_googlebusinessreviews.html5 b/contao/templates/mod_googlebusinessreviews.html5
@@ -2,11 +2,11 @@
 
 <?php $this->block('content'); ?>
 
-    <div class="reviews">
+    <ul class="reviews">
         <?php
         $reviews = $this->reviews;
         foreach ($reviews as $review): ?>
-        <div class="review">
+        <li class="review">
             <div class="author">
                 <a href="<?= $review['author_url'] ?>" target="_blank"><img class="profile" src="<?= $review['profile_photo_url'] ?>" alt="Photo of <?= $review['author_name'] ?>" width="40" height="40"></a>
                 <div>
@@ -21,9 +21,9 @@
             </div>
             <p class="text"><?= $review['text'] ?></p>
             <div class="google"></div>
-        </div>
+        </li>
         <?php endforeach; ?>
-    </div>
+    </ul>
 
     <?php if ($this->link2gbp): ?>
         <div class="link2gbp">

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -24,33 +24,17 @@
     font-style: normal;
     font-weight: normal;
     speak: never;
-
     display: inline-block;
     text-decoration: inherit;
     width: 1em;
     margin-right: .2em;
     text-align: center;
-    /* opacity: .8; */
-
-    /* For safety - reset parent styles, that can break glyph codes*/
     font-variant: normal;
     text-transform: none;
-
-    /* fix buttons height, for twitter bootstrap */
     line-height: 1em;
-
-    /* Animation center compensation - margins should be symmetric */
-    /* remove if not needed */
     margin-left: .2em;
-
-    /* you can be more comfortable with increased icons size */
-    /* font-size: 120%; */
-
-    /* Font smoothing. That was taken from TWBS */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-
-    /* Uncomment for 3D effect */
     text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
 }
 
@@ -59,6 +43,7 @@
 
 .mod_googlebusinessreviews .reviews {
     display: flex;
+    flex-direction: row;
 }
 .mod_googlebusinessreviews .review {
     flex: 1 1 0;
@@ -109,8 +94,6 @@
 .mod_googlebusinessreviews .review .rating .icon-star.grey {
     color: lightgrey;
 }
-.mod_googlebusinessreviews .review .text {
-}
 .mod_googlebusinessreviews .review .text p {
     font-size: 1rem;
     color: rgb(70, 70, 70);
@@ -131,3 +114,11 @@
     text-align: right;
     margin-top: 10px;
 }
+@media (max-width: 967px) {
+    .mod_googlebusinessreviews .reviews {
+        flex-direction: column;
+    }
+    .mod_googlebusinessreviews .review {
+        margin-top: 10px;
+    }
+}