fixed spacing between text boxes

GenerateNU · Apr 7, 2024 · 7b1183c · 7b1183c
1 parent 61dcf9f
commit 7b1183c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git 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
@@ -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>