Merge pull request #192 from thecoding-society/Event_Dir

Event Directors Layout Completed

css/style2.css

@@ -548,6 +548,16 @@ pre,
 	justify-content: center;
 	align-items: center;
 }
+.layout .card .content , .layout .card{
+	display: flex !important;
+	flex-direction: row !important;
+	justify-content: space-evenly !important;
+	width: 400px !important;
+	height: 230px !important;
+}
+.layout .card .content .cardContent h3{
+	font-size: 25px !important;
+}
 .container-team .grid .card , .first .card , .event-directors .card {
 	position: relative;
 	width: 250px;
@@ -630,6 +640,11 @@ pre,
 	align-items: center;
 	flex-direction: row;
 }
+.layout .card .sci{
+	position: absolute !important;
+	bottom: 45px !important;
+	right: 23px !important;
+}
 .container-team .card .sci li {
 	margin: 0 10px;
 	transform: translateY(40px);
@@ -1300,6 +1315,15 @@ div .contact_name .name {
 	.cardContent p{
 		margin-bottom: 30px;
 	}
+	.layout .card .content , .layout .card{
+		width: 400px !important;
+		height: 230px !important;
+	}
+	.layout .card .sci{
+		position: absolute !important;
+		bottom: 45px !important;
+		right: 40px !important;
+	}
 }
 @media (max-width: 1750px){
 	.container-team .grid .card{
@@ -1319,6 +1343,15 @@ div .contact_name .name {
 	.container-team .card .sci li a {
 		font-size: 20px;
 	}
+	.layout .card .content , .layout .card{
+		width: 350px !important;
+		height: 180px !important;
+	}
+	.layout .card .sci{
+		position: absolute !important;
+		bottom: 30px !important;
+		right: 40px !important;
+	}
 }
 @media (max-width: 1560px){
 	.container-team .grid .card{
@@ -1348,6 +1381,9 @@ div .contact_name .name {
 	.modify{
 		font-size: 125px !important;
 	}
+	.layout .card .content .cardContent h3{
+		font-size: 20px !important;
+	}
 }
 @media(max-width: 968px){
 	.modify{

index.html

@@ -1622,7 +1622,7 @@ <h3>Dr D Anuradha</h3>
 						</ul>
 					</div>
 				</div>
-				<div class="event-directors">
+				<div class="event-directors layout">
 					<div class="card">
 						<div class="content">
 							<div class="img"><img

js/main.js

@@ -86,3 +86,20 @@ document.addEventListener("DOMContentLoaded", function () {
 	// Initial check in case the section is already in view
 	revealTimelineLine();
 });
+
+// Event-directors
+
+function updateLayout() {
+    const element = document.querySelector('.event-directors');
+    if (window.innerWidth < 768) {
+      element.classList.remove('layout'); // Remove the layout class below 630px
+    } else {
+      element.classList.add('layout'); // Add it back above 630px
+    }
+  }
+
+  // Check on load
+  updateLayout();
+
+  // Check on window resize
+  window.addEventListener('resize', updateLayout);