From 19b7a5ef2b04daa639cb9c8fc093cd8069c56e4c Mon Sep 17 00:00:00 2001
From: Peter Quinn <peter.quinn396@gmail.com>
Date: Sun, 3 Sep 2023 12:55:36 -0400
Subject: [PATCH] fix mobile view

---
 .../personal/led_dress/led_dress.html         | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/pages/projects/personal/led_dress/led_dress.html b/pages/projects/personal/led_dress/led_dress.html
index ce5e0f8..7a1911f 100644
--- a/pages/projects/personal/led_dress/led_dress.html
+++ b/pages/projects/personal/led_dress/led_dress.html
@@ -178,18 +178,21 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
 			<p style="text-align:center">First time turning on the lights</p>
 
 			<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
-				<div style="width: 40%">
+				<div style="width: 40%; display: flex; justify-content: center;">
 					<img src="images/board1.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="width: 400px; height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style=" height: 100%; width: 90%; max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
 				</div>
-				<div style="width: 40%">
+				<div style="width: 40%;  display: flex; justify-content: center;">
 					<img src="images/board2.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="width: 400px; height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="height: 100%; width: 90%; max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
 				</div>
 			</div>
-			<p style="text-align:center">Fully soldered protoboard. The ESP32 board controls 6 H-bridges (red parts)
-				with PWM signals to drive current bi-directionally through
-				the LED strips either white or colored</p>
+			<div style="display: flex; justify-content: center;">
+				<p style="text-align:center; width: 75%;">Fully soldered protoboard. The ESP32 board controls 6
+					H-bridges (red parts) with PWM signals to drive current bi-directionally through
+					the LED strips either white or colored</p>
+			</div>
+
 
 			<div style="display: flex; justify-content: center; padding-bottom: 15px;">
 				<div class="embed-responsive embed-responsive-16by9" style="max-width: 800px;">
@@ -199,9 +202,11 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
 			<p style="text-align:center">Controlling 6 LED strips in a rotating wave pattern</p>
 
 
-			<div class="row">
-				<img src="images/enclosure.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-					style="height:100%;  width: 600px; padding-top: 25px; padding-bottom: 15px">
+			<div class="row" style="display: flex; justify-content: center">
+				<div style="width: 60%; display: flex; justify-content: center;">
+					<img src="images/enclosure.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
+						style="height:100%;  width: 100%; padding-top: 25px; padding-bottom: 15px">
+				</div>
 			</div>
 			<p style="text-align:center">Board placed into its 3D printed enclosure</p>
 
@@ -219,7 +224,7 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
 				</div>
 			</div>
 			<div style="display: flex; justify-content: center;">
-				<p style="text-align:center; width: 60%;">3D Models of top and bottom pieces of enclosure. The top
+				<p style="text-align:center; width: 75%;">3D Models of top and bottom pieces of enclosure. The top
 					slides
 					along built in rails on the bottom and friction fits snugly into place (like a TV remote battery
 					cover)
@@ -227,29 +232,29 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
 			</div>
 
 			<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
-				<div style="width: 30%;">
+				<div style="width: 30%; display: flex; justify-content: center;">
 					<img src="images/model.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="height:100%;  width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
 				</div>
-				<div style="width: 30%;">
+				<div style="width: 30%; display: flex; justify-content: center;">
 					<img src="images/dress1.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="height:100%;  width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
 				</div>
-				<div style="width: 30%;">
+				<div style="width: 30%; display: flex; justify-content: center;">
 					<img src="images/dress2.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="height:100%;  width: 300px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="max-height: 500px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: contain;">
 				</div>
 			</div>
 			<p style="text-align:center">Figuring out how to fit 30m of LEDs in a skirt</p>
 
 			<div class="row" style="display: flex; justify-content: center; padding-bottom: 15px;">
-				<div style="width: 40%">
+				<div style="width: 40%; display: flex; justify-content: center;">
 					<img src="images/final_dress.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="height:600px;  width: 400px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="max-height:600px; height: 100%; width: 75%; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
 				</div>
-				<div style="width: 40%">
+				<div style="width: 40%; display: flex; justify-content: center;">
 					<img src="images/party_mode.jpg" class="mx-auto img-responsive img-rounded" alt="measurement"
-						style="height:600px;  width: 400px; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
+						style="max-height:600px;  height: 100%; padding-top: 25px; padding-bottom: 15px; overflow: hidden; object-fit: cover;">
 				</div>
 			</div>
 			<p style="text-align:center">Final tests and big day</p>
@@ -260,8 +265,6 @@ <h3 style="padding-top:15px; padding-bottom:15px">Build Montage</h3>
 				</div>
 			</div>
 
-
-
 		</div>
 	</div>