Questions section responsive design completed.

Author: mustafadalga

assets/css/main.css

@@ -1079,6 +1079,7 @@ background-color: var(--black-050);
 }
 .questions-grid{
   margin-top: 6rem;
+  padding: 0 5rem;
   display: grid;
   grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
   grid-gap: 2.5rem;
@@ -1340,6 +1341,51 @@ display: flex;
   .teams-footer{
     width: 90%;
   }
+  .questions-content .question-title{
+    font-size: 2.3rem;
+  }
+  .questions-body{
+    flex-direction: column;
+    justify-content: initial;
+  }
+  .questions-body-items{
+    display: flex;
+  }
+  .questions-body-item{
+    flex-basis: 33%;
+    flex-direction: column;
+    padding: 1rem;
+    justify-content: center;
+    text-align: center;
+    margin: 0;
+  }
+  .question-item-text{
+    margin-left: initial;
+    margin-top: 1rem;
+  }
+  .question-arrow-right,.question-arrow-left{
+    display: none;
+  }
+  .questions-body-item-content{
+    margin: 2rem 0 0;
+    order: 3;
+  }
+  .question-item-content-img{
+    padding: 0 2rem;
+  }
+  .question-item-content-text{
+    font-size: 1.8rem ;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .questions-grid-item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom:3rem;
+    text-align: center;
+  }
 }
 @media screen and (max-width: 640px) {
   .nav-icon {
@@ -1390,5 +1436,9 @@ display: flex;
     font-size: 1.4rem;
     line-height: 2rem;
   }
+  .questions-grid{
+    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+    padding: 0 9rem;
+  }
 }
 /* End Media Queries */

assets/css/main.css.map

@@ -431,17 +431,17 @@ <h4 class="question-item-content-text">
                <div class="questions-body-items">
                    <div class="questions-body-item"  data-id="3">
                        <img src="https://cdn.sstatic.net/Img/home/tags.svg?v=913379eb09eb" alt="" class="question-item-icon">
-                       <div class="question-item-text">Ask a question</div>
+                       <div class="question-item-text">Tag your question</div>
                        <div class="question-arrow-left"></div>
                    </div>
                    <div class="questions-body-item"  data-id="4">
                        <img src="https://cdn.sstatic.net/Img/home/accept.svg?v=27d5be078970" alt="" class="question-item-icon">
-                       <div class="question-item-text">Vote on everything</div>
+                       <div class="question-item-text">Accept a answer</div>
                        <div class="question-arrow-left"></div>
                    </div>
                    <div class="questions-body-item"  data-id="5">
                        <img src="https://cdn.sstatic.net/Img/home/get-recognized.svg?v=3b339d9aa10c" alt="" class="question-item-icon">
-                       <div class="question-item-text">Answer questions</div>
+                       <div class="question-item-text">Get recognized</div>
                        <div class="question-arrow-left"></div>
                    </div>
                </div>
@@ -489,7 +489,6 @@ <h4 class="grid-item-title">Find career opportunities
                            <a href="#">Developer Story</a>.
                        </p>
                    </div>
-
                </div>
            </div>
        </div>