feat: add review item component responsive design

DaleStudy · Jun 20, 2024 · fdf9a80 · fdf9a80
1 parent 016fa3c
commit fdf9a80
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 25 deletions.
diff --git a/components/review-item.js b/components/review-item.js
@@ -31,54 +31,98 @@ class ReviewItem extends HTMLElement {
           flex-direction: column;
           align-items: center;
           border-radius: 10px;
-          padding: 41px 51px 31px;
+          padding: 39px 20px;
           background-color: #efefef;
-          max-width: 568px;
         }
         .review-item blockquote,
           figure {
           margin: 0;
         }
-        .review-content {
-          display: flex;
-          align-items: center;
-        }
-        .review-content figure {
+        .review-img {
           width: 104px;
           height: 104px;
           flex-shrink: 0;
           object-fit: cover;
-          margin-right: 31px;
         }
-        .review-content figure > img {
+        .review-img figure > img {  
           width: 100%;
           height: 100%;
           padding-top: 7px;
           border-radius: 48%;
           background-color: #ffffff;
         }
+        .review-content {
+          display: flex;
+          flex-direction: column-reverse;
+          align-items: center;
+          text-align: center;
+          margin-top: 10px;
+        }
         .review-content blockquote {
           font-size: 14px;
+          margin-top: 17px;
+          word-break: keep-all;
         }
-        .review-footer {
+        .review-content figcaption {
           width: 100%;
-          margin-top: 14px;
-        }
-        .review-footer figcaption {
           font-size: 16px;
-          text-align: right;
+          text-align: center;
+        }
+
+        /* Small devices such as large phones (640px and up) */
+        @media only screen and (min-width: 640px) {
+          /* TODO: Check if the media query guideline supports small screens or not. */
+        }
+
+        /* Medium devices such as tablets (768px and up) */
+        @media only screen and (min-width: 768px) {
+          .review-item {
+            padding: 37px 20px;
+          }
+          .review-content blockquote {
+            margin-top: 16px;
+          }
+        }
+
+        /* Large devices such as laptops (1024px and up) */
+        @media only screen and (min-width: 1024px) {
+          .review-item {
+            padding: 41px 51px 31px;
+            flex-direction: row;
+            align-items: flex-start;
+          }
+          .review-img {
+            margin-right: 31px;
+          }
+          .review-content {
+            flex-direction: column;
+            margin-top: 0;
+            text-align: left;
+          }
+          .review-content blockquote {
+            margin-top: 0;
+            margin-bottom: 14px;
+            word-break: unset;
+          }
+          .review-content figcaption {
+            text-align: right;
+          }
+        }
+
+        /* Largest devices such as desktops (1280px and up) */
+        @media only screen and (min-width: 1280px) {
+          /* TODO: Add after chhecking the media query guideline. */
         }
       </style>
+
       <article class="review-item">
-        <section class="review-content">
-          <figure>
-            <img src="${this.img}" alt="Reviewer">
-          </figure>
-          <blockquote>${this.text}</blockquote>
-        </section>
-        <footer class="review-footer">
-          <figcaption>${this.name}</figcaption>
-        </footer>
+          <section class="review-img">
+            <figure><img src="${this.img}" alt="Reviewer"></figure>
+          </section>
+          <section class="review-content">
+            <blockquote>${this.text}</blockquote>
+            <figcaption>${this.name}</figcaption>
+          </section>
       </article>
       `;
     } catch (error) {

diff --git a/index.html b/index.html
@@ -144,9 +144,11 @@
 
       .review-card-list {
         display: grid;
-        grid-template-columns: repeat(2, 568px);
-        gap: 10px 9px;
+        grid-template-columns:  minmax(306px, 1fr);
+        gap: 10px;
         padding-top: 40px;
+        place-content: center;
+        place-items: center;
       }
 
       .review-card {
@@ -230,6 +232,20 @@
         font-size: 2.4rem;
         font-weight: regular;
       }
+
+      /* Medium devices such as tablets (768px and up) */
+      @media only screen and (min-width: 768px) {
+        .review-card-list {
+          grid-template-columns: repeat(2, minmax(306px, 1fr));
+        }
+      }
+
+      /* Large devices such as laptops (1024px and up) */
+      @media only screen and (min-width: 1024px) {
+        .review-card-list {
+          gap: 10px 9px;
+        }
+      }
     </style>
   </head>