responsive css for 3 col to 1 in best solution for you section

Happy-Narwhal · Nov 24, 2023 · 8b32ccb · 8b32ccb
1 parent 057c98d
commit 8b32ccb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
@@ -344,10 +344,13 @@ ul.pNav li:hover::after, ul.pNav li.active::after {
   display: inline-block;
 }
 
+.col-3-sm-1 {
+  width: 33%;
+}
+
 .row-type {
   margin-left: auto;
   float: left;
-  width: 20%;
   padding: 0 30px;
   text-align: center;
   transition: all .2s ease-in-out;
@@ -359,11 +362,20 @@ ul.pNav li:hover::after, ul.pNav li.active::after {
   border: 2px solid #fff;
   border-radius: 8px;
   box-shadow: 0 15px 30px rgba(102, 113, 228, 0.13);
-  height: 470px;
+  height: 510px;
   margin: 20px 0;
   transition: all .2s ease-in-out;
 }
 
+@media (max-width: 782px) {
+  .col-3-sm-1 {
+    width: 100%;
+  }
+  .col-type {
+    height: 250px;
+  }
+}
+
 .col-type:hover {
   transform: scale(1.1);
 }
@@ -395,7 +407,6 @@ ul.pNav li:hover::after, ul.pNav li.active::after {
 @media (max-width: 1600px) {
   .row-type {
     padding: 0 10px;
-    width: 24%;
   }
 }
 
@@ -411,15 +422,12 @@ ul.pNav li:hover::after, ul.pNav li.active::after {
   }
   .row-type {
     padding: 0 10px;
-    width: 100%;
   }
   .col-type {
     width: 80%;
     margin: 20px auto;
-    height: 200px;
   }
   .col-type p {
-    line-height: normal;
     padding: 0 10px;
   }
   .steps {

diff --git a/index.html b/index.html
@@ -38,26 +38,26 @@ <h2>Industry Experience</h2>
         <h1 class="main">The Best Solution For You</h1>
         <p></p>
         <div class="type-box">
-            <div class="row-type">
+            <div class="row-type col-3-sm-1">
                 <div class="col-type">
                     <div class="steps">
                         <img src="assets/images/undraw_web_search_eetr.jpg" alt="Websites" height="150" />
                     </div>
-                    <h3>WEB</h3>
+                    <h3>WEB DEVELOPMENT</h3>
                     <p>Custom web applications designed for the best user experience.
                       We'll design and build static webpages, custom applications, or help with your existing site.</p>
                 </div>
             </div>
-            <div class="row-type">
+            <div class="row-type col-3-sm-1">
                 <div class="col-type">
                     <div class="steps">
                         <img src="assets/images/undraw_personal_website_weap.jpg" alt="Web Portal" height="150" />
                     </div>
-                    <h3>Game Dev</h3>
+                    <h3>GAME DEVELOPMENT</h3>
                     <p>We'll work on games with Unity, Godot, and JavaScript. We're currently in the early stages of 4x and reverse TD games.</p>
                 </div>
             </div>
-            <div class="row-type">
+            <div class="row-type col-3-sm-1">
                 <div class="col-type">
                     <div class="steps">
                         <img src="assets/images/undraw_wireframing_nxyi.jpg" alt="Design" height="150" />