Styling change (Font Size and Container Width) and Class name fix

index.html

@@ -23,9 +23,9 @@
 				</div>
 				<div class="grid-container">
 					<h3 class="overview-heading"><span class="vl">Dataset</span></h3>
-					<div class="overview-content">
-						<p>The model is trained with multi-tissue histology images based on <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet/" target="_blank">CoNSeP dataset.</a></p>
-						<ul>
+					<div>
+						<p class="overview-content">The model is trained with multi-tissue histology images based on <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet/" target="_blank">CoNSeP dataset.</a></p>
+						<ul >
 							<li>Target: Nuclei</li>
 							<li>Task: Instance Segmentation</li>
 							<li>Modality: RGB images</li>
@@ -34,8 +34,8 @@
 				</div>
 				<div class="grid-container">
 					<h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
-					<div class="overview-content">
-						<p>Overview approach for simultaneous nuclear instance segmentation.</p>
+					<div>
+						<p class="overview-content">Overview approach for simultaneous nuclear instance segmentation.</p>
 						<img class="content-image" src="file/figures/OverviewNucleiSegmentationClassification.jpg" alt="model-architecture" />
 					</div>
 				</div>

style.css

@@ -8,41 +8,39 @@ body {
 }
 
 .container {
-	width: 80%;
+	width: 100%;
 	margin: 0 auto;
 }
 
 .title {
-	font-size: 40px !important;
+	font-size: 24px !important;
 	font-weight: 600 !important;
-	line-height: 50px !important;
 	letter-spacing: 0em;
 	text-align: center;
 	color: #374159 !important;
 }
 
 .subtitle {
-	font-size: 2em !important;
+	font-size: 24px !important;
 	font-style: italic;
 	font-weight: 400 !important;
-	line-height: 40px !important;
 	letter-spacing: 0em;
 	text-align: center;
 	color: #1d652a !important;
+	padding-bottom: 0.5em;
 }
 
 .overview-heading {
-	font-size: 2em !important;
+	font-size: 24px !important;
 	font-weight: 600 !important;
-	line-height: 40px !important;
 	letter-spacing: 0em;
 	text-align: left;
 }
 
 .overview-content {
-	font-size: 22px !important;
+	font-size: 14px !important;
 	font-weight: 400 !important;
-	line-height: 33px !important;
+	line-height: 30px !important;
 	letter-spacing: 0em;
 	text-align: left;
 }
@@ -62,10 +60,20 @@ body {
 	display: grid;
 	grid-template-columns: 1fr 2fr;
 	gap: 20px;
+	align-items: flex-start;
+	margin-bottom: 0.7em;
 }
 
 @media screen and (max-width: 768px) {
+	.container {
+		width: 90%;
+	}
+
 	.grid-container {
 		display: block;
 	}
+
+	.overview-heading {
+		font-size: 18px !important;
+	}
 }