Merge pull request #164 from Ayushmaanagarwal1211/main

Fixed responsive of contributor section
mdazfar2 · Jun 5, 2024 · 58900da · 58900da
2 parents 88a4a5b + c94a8cc
commit 58900da
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
@@ -90,7 +90,6 @@ <h1>HelpOps-Hub</h1>
 
         </nav>
     <div class="container">
-      <main class="main-content">
         <div class="intro">
           <h1>Our Team</h1>
           <p>
@@ -101,7 +100,6 @@ <h1>Our Team</h1>
         </div>
         <div id="team-grid">
           <div class="team-member">
-            <div class="card1">
               <div class="image-div">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
               </div>
@@ -110,15 +108,13 @@ <h1>Our Team</h1>
                 <h2>Azfar Alam</h2>
                 <p>DevOps Engineer</p>
               </div>
-            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/mdazfar2"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/mdazfar2"><i class="fab fa-github"></i> GitHub</a>
               <a href="https://www.linkedin.com/in/md-azfar-alam/"><i class="fab fa-linkedin"></i>linkedin</a>
             </div>
           </div>
           <div class="team-member">
-            <div class="card2">
               <div class="image-div">
                 <img src="Screenshot (250).png" alt="Anurag Pandey" />
               </div>
@@ -127,15 +123,13 @@ <h2>Azfar Alam</h2>
                 <h2>Anurag Pandey</h2>
                 <p>Software Engineer</p>
               </div>
-            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/pandeyji711"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/pandeyji711"><i class="fab fa-github"></i> GitHub</a>
               <a href="https://www.linkedin.com/in/anuragpandey0711/"><i class="fab fa-linkedin"></i>linkedin</a>
             </div>
           </div>
         </div>
-      </main>
     </div>
     <button id="scrollToTopBtn" class="scrollToTopBtn">▲</button>
     <div id="team-grid1">

diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
@@ -214,15 +214,24 @@ width: 40px;
 .container {
   display: flex;
   width: 100%;
+  height: auto;
+  flex-direction: column;
 }
 
 .main-content {
   flex: 1;
   padding: 20px;
+  height: auto;
 }
 
 .intro {
-  margin:24px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  margin: 30px;
+  justify-content: center;
 }
 
 /* .intro h1 {
@@ -236,14 +245,33 @@ width: 40px;
 } */
 
 #team-grid {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  gap: 5rem;
-  height: 300px;
+
+  display: flex;
+  flex-direction: row;
+justify-content: center;
+ min-height: 300px;
+ height: auto;
+  gap: 30px;
+}
+
+@media only screen and (max-width:944px) {
+    #team-grid{
+      flex-direction: column;
+
+    }
+    .intro{
+      align-items: center;
+    }
+}
+@media only screen and (max-width:520px) {
+  .team-member{
+    display: flex;
+    flex-direction: column !important;
+  }
+  .intro{
+    align-items: center;
+  }
 }
-
 .team-member {
   display: flex;
   justify-content: space-between;
@@ -254,6 +282,7 @@ width: 40px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding: 20px;
  /* background-color: gray; */
+ gap: 10px;
   margin-left: 20px;
   background-position: center center;
   background-size: cover;

diff --git a/Official_Website/style.css b/Official_Website/style.css
@@ -5,6 +5,20 @@ p {
   margin: 0;
   padding: 0;
 }
+.team-grid{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap !important;
+}
+.img-div{
+  width: 40%;
+
+}
+.team-member{
+  display: flex;
+  flex-direction: row;
+position: relative;
+}
 /* style search container */
 .search-container {
   display: flex;