adapt to small size screens

Trustworthy-Software · Oct 19, 2023 · b49f354 · b49f354
1 parent 6fecb51
commit b49f354
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 81 deletions.
diff --git a/css/style.css b/css/style.css
@@ -447,6 +447,8 @@ a:focus {
     flex-wrap: nowrap;
 	justify-content: center;
 	height: 500px;
+	display: flex;
+    flex-wrap: wrap;
 
 }
 
@@ -456,79 +458,22 @@ a:focus {
     padding: 15px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, .07);
+	width: 100%;
 }
 
 .prof .prof-img {
     position: relative;
     overflow: hidden;
 }
 
-.prof .prof-img img {
-    position: relative;
-    width: 100%;
-}
-
-.prof .prof-social {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: .5s;
-}
-
-.prof .prof-social a {
-    position: relative;
-    margin: 0 3px;
-    margin-top: 100px;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 40px;
-    font-size: 16px;
-    color: #F7CAC9;
-    background: #343148;
-    opacity: 0;
-}
-
-.prof .prof-social a:hover {
-    color: #343148;
-    background: #F7CAC9;
-}
 
 
-.prof .prof-item:hover .prof-social {
-    background: rgba(256, 256, 256, .5);
-}
-
-.prof .prof-item:hover .prof-social a:first-child {
-    opacity: 1;
-    margin-top: 0;
-    transition: .3s 0s;
-}
-
-.prof .prof-item:hover .prof-social a:nth-child(2) {
-    opacity: 1;
-    margin-top: 0;
-    transition: .3s .1s;
-}
-
-.prof .prof-item:hover .prof-social a:nth-child(3) {
-    opacity: 1;
-    margin-top: 0;
-    transition: .3s .2s;
+.prof .prof-img img {
+    width: 100%; 
+    height: auto;
+
 }
 
-.prof .prof-item:hover .prof-social a:nth-child(4) {
-    opacity: 1;
-    margin-top: 0;
-    transition: .3s .3s;
-}
 
 .prof .prof-text {
     position: relative;
@@ -543,11 +488,25 @@ a:focus {
 	margin: 0;
 }
 
-.prof .prof-text p {
-    margin: 0;
-}
 
+/* Set a specific width for images on smaller screens */
+@media (max-width: 767px) {
+	.prof .prof-text {
+    position: relative;
+    padding: 25px 15px 10px 15px;
+    text-align: center;
+    background: #ffffff;
+    margin: 0 auto; /* Center the text container */
+	width: 100%; 
+    }
+
+	.prof .prof-text h2 {
+    font-size: 12px;
+    font-weight: 600;
+	margin: 0;
+}
 
+}
 
 
 /*******************************/
@@ -679,19 +638,14 @@ a:focus {
 }
 
 .presenter-details img {
-    width: 150px;
-    height: 150px;
+    width: 100%;
+    max-width: 150px; /* Set a maximum width if needed */
+    height: auto; /* Maintain the aspect ratio */
     border-radius: 50%;
     margin-right: 20px;
 }
 
-.event img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    margin-right: 20px;
-
-}
+
 
 
 .black-underligned{
@@ -735,6 +689,18 @@ a:focus {
     margin-bottom: 20px; /* Optional: Add margin at the bottom of the content above the frame */
 }
 
+@media (max-width: 767.98px) {
+
+	.event {
+        flex-direction: column; /* Change to column layout on smaller screens */
+        align-items: flex-start; /* Align items to the start of the column */
+    }
+
+    .presenter-details {
+        margin-right: 0; /* Remove margin for speaker details */
+        margin-bottom: 10px; /* Add a little space between speaker details and event info */
+    }
+}
 
 /*******************************/
 /********* Contact CSS *********/
@@ -936,6 +902,15 @@ a:focus {
         margin: 5px 0;
         text-align: center;
     }
-}
+
+	.event {
+        flex-direction: column; /* Change to column layout on smaller screens */
+        align-items: flex-start; /* Align items to the start of the column */
+    }
 
+    .presenter-details {
+        margin-right: 0; /* Remove margin for speaker details */
+        margin-bottom: 10px; /* Add a little space between speaker details and event info */
+    }
+}
 
diff --git a/index.html b/index.html
@@ -117,12 +117,14 @@ <h2>Welcome to TOOS!</h2>
 		<!-- Prof Start -->
         <div class="prof">
             <div class="container">
-                <div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
+                <div class="section-header text-center">
                     <p>TruX</p>
                     <h2>Professors</h2>
                 </div>
                 <div class="prof-img-frame">
-                    <div class="col-lg-5 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
+
+
+                    <div class="col-lg-5 col-md-6 col-sm-4 col-xs-4">
                         <div class="prof-item">
                             <div class="prof-img">
 							    <a href="https://bissyande.github.io/">
@@ -135,7 +137,8 @@ <h2>Prof. Dr. Tegawendé Bissyandé</h2>
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-5 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
+
+                    <div class="col-lg-5 col-md-6 col-sm-4 col-xs-4">
                         <div class="prof-item">
                             <div class="prof-img">
 							    <a href="https://jacquesklein2302.github.io/">
@@ -155,11 +158,16 @@ <h2>Prof. Dr. Jacques Klein</h2>
 
 
 
+
+
+
+
+
         <!-- Upcoming Events Start -->
 
-		<div class="upcomingevent wow zoomIn" data-wow-delay="0.1s">
+		<div class="col-lg-12 col-md-10 col-sm-10 col-xs-10 upcomingevent wow zoomIn" data-wow-delay="0.1s">
             <div class="container">
-			    <div class="col-lg-12 col-md-10">
+
 			        <div class="frame-title">
                         <h2>Upcoming Seminars<h2>
                     </div>
@@ -197,7 +205,7 @@ <h3>ITER: Iterative Neural Repair for Multi-Location Patches</h3>
                         </div>
 					</div>
 
-				</div>
+
             </div>
         </div>