Made what we offer responsive

GodstimeNwabue · Oct 26, 2023 · 4fd1c58 · 4fd1c58
1 parent 742100e
commit 4fd1c58
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -191,49 +191,49 @@ <h2>Book an Appointment</h2>
             <h5>What we offer</h5>
             <h2>We offer full service auto repair & maintenance</h2>
             <div class="offers flex justify-between">
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/1vhPqCS/Icon-7.png" alt="engine">
                         <p>Diagnostics</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/yFS4KJC/Icon-8.png" alt="engine wheel repair">
                         <p>Engine Wheel Repair</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/xLh2wVR/Vector-3.png" alt="engine">
                         <p>Engine Repair</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/kQMNDrL/Group.png" alt="oil filter">
                         <p>Oil Filter</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/WgZ4cqv/Vector-1.png" alt="body work">
                         <p>Body Work</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/djKGHTK/Icon-5.png" alt="engine">
                         <p>Batteries</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/2hWnyBw/Vector-2.png" alt="insurance claim">
                         <p>Insurance Claim</p>
                     </div>
                 </div>
-                <div class="offer-box">
+                <div class="offer-box offer-box_mq">
                     <div>
                         <img src="https://i.ibb.co/3mXWNC2/Icon-6.png" alt="custom service">
                         <p>Custom Service</p>

diff --git a/style.css b/style.css
@@ -76,6 +76,7 @@
         display: flex;
         justify-content: center;
         padding-top: 28px;
+        gap: 10px;
     }
     .right-section ul {
         flex-wrap: wrap;
@@ -193,6 +194,13 @@
     }
 }
 
+/*What we offer responsiveness*/
+@media (max-width: 860px) and (min-width: 450px) {
+    .offer-box_mq {
+        min-width: 48%;
+    }
+}
+
 /*Tablet view on hero section*/
 @media (max-width: 769px) {
     #hero-section .flex {