From 7b1183c9b030aeb526b46d0474cc29e7242fd7f0 Mon Sep 17 00:00:00 2001
From: michelleli04 <michelle6465li@gmail.com>
Date: Sun, 7 Apr 2024 11:57:41 -0400
Subject: [PATCH] fixed spacing between text boxes

---
 website/src/App.css                 | 35 ++++++++++++++++++++---------
 website/src/ProductPurchasePage.tsx | 10 ++++-----
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/website/src/App.css b/website/src/App.css
index 4e9e09d..6551596 100644
--- a/website/src/App.css
+++ b/website/src/App.css
@@ -56,13 +56,27 @@
   flex-direction: row;
   height: 100vh;
 }
-.textbox-col {
+
+.horizontal-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex: 1;
-  padding: 5%;
-  width: 1/2;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+}
+.textbox-col {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-top: 2%;
+  padding-bottom: 5%; 
+  padding-left: 5%; 
+  padding-right: 5%; 
+  box-sizing: border-box; /* Include padding in the width calculation */
+
 }
 .formContainer {
     display: flex;
@@ -71,7 +85,6 @@
     align-items: center;
     justify-content: center;
     padding-left: 5%;
-
 }
 .text-left-align {
   text-align: left;
@@ -89,12 +102,12 @@
 .gray-rounded-rectangle {
   background-color: var(--white-hover);
   border-radius: 20px;
-  padding-left: 5%;
-  padding-right: 5%;
-  padding-bottom: 5%;
-  padding-top: 4%;
-  margin: 3%
-
+  padding-top: 2%;
+  padding-bottom: 5%; 
+  padding-left: 5%; 
+  padding-right: 5%; 
+  margin: 2%;
+  flex: 1;
 }
 
 .bg-white {
diff --git a/website/src/ProductPurchasePage.tsx b/website/src/ProductPurchasePage.tsx
index 5a0dfd1..ce6c024 100644
--- a/website/src/ProductPurchasePage.tsx
+++ b/website/src/ProductPurchasePage.tsx
@@ -14,21 +14,21 @@ function ProductPurchasePage() {
           </div>
         </div>
       </div>
-        <div className='container bg-white text-left-align'>
+        <div className='horizontal-container bg-white text-left-align'>
           <div className='textbox-col'>
             <div className='gray-rounded-rectangle'>
               <h2 className='text-header'>Complex Bending</h2>
               <p className='text-par'>Because Tubender is free form, it can create complex shapes using software. The user can also develop CAD schematics to create a custom pipe to bend. This offers a much wider variety of possibilities, one that would not be possible with a regular manual bender.</p>
             </div>
             <div className='gray-rounded-rectangle'>
-              <h2 className='text-header'>Portable</h2>
-              <p className='text-par'>This machine is incredibly large, around 2040 feet in length, and weighs about 2 tons. It is not portable or easy to store. Tubender however, is very easy to move and store, with a max length of about 5 feet and weight under 400 pounds. This is another key feature that opens up the accessibility of Tubender, making it a more attractive option for those looking for a tube bending solution.</p>
+              <h2 className='text-header'>Automatic Bending</h2>
+              <p className='text-par'>Tubender is controlled by software, which allows the user to simply set out the required steps for bending, and press play. There is no manual labor when creating the pipes. This also allows for pipes to be repeated, so if a user needed many of a certain shape, it would be easy to reuse old designs. This drastically increases Tubender’s accessibility and reduces the physical requirements of creating bent tubes.</p>
             </div>
           </div>
           <div className='textbox-col'>
             <div className='gray-rounded-rectangle'>
-              <h2 className='text-header'>Automatic Bending</h2>
-              <p className='text-par'>Tubender is controlled by software, which allows the user to simply set out the required steps for bending, and press play. There is no manual labor when creating the pipes. This also allows for pipes to be repeated, so if a user needed many of a certain shape, it would be easy to reuse old designs. This drastically increases Tubender’s accessibility and reduces the physical requirements of creating bent tubes.</p>
+              <h2 className='text-header'>Portable</h2>
+              <p className='text-par'>This machine is incredibly large, around 2040 feet in length, and weighs about 2 tons. It is not portable or easy to store. Tubender however, is very easy to move and store, with a max length of about 5 feet and weight under 400 pounds. This is another key feature that opens up the accessibility of Tubender, making it a more attractive option for those looking for a tube bending solution.</p>
           </div>
           <div className='gray-rounded-rectangle'>
             <h2 className='text-header'>Affordability</h2>