add centering of extension/ios section

maxdemaio · Sep 16, 2023 · 68af3fd · 68af3fd
1 parent a4cd2d2
commit 68af3fd
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -104,23 +104,27 @@ <h1>
           </div>
         </div>
       </section>
-
+      
       <section class="extension">
-        <h2 class="sub-header">Web Extension</h2>
-        <p>
-          The web extension functions exactly like this website. The added bonus is when you visit a chess.com profile, you'll be able to instantly see that profile's chess.com consistency heatmap
-          simply by opening the extension!
-        </p>
-        <div class="image-container">
-          <img class="myImage1" alt="Extension screenshot" src="./static/extension-screenshot.png" />
+        <div class="container">
+          <h2 class="sub-header">Web Extension</h2>
+          <p>
+            The web extension functions exactly like this website. The added bonus is when you visit a chess.com profile, you'll be able to instantly see that profile's chess.com consistency heatmap
+            simply by opening the extension!
+          </p>
+          <div class="image-container">
+            <img class="myImage1" alt="Extension screenshot" src="./static/extension-screenshot.png" />
+          </div>
         </div>
       </section>
 
       <section class="ios">
-        <h2 class="sub-header">iOS App (Coming Soon)</h2>
-        <p>The iOS app is currently under development. Our main goal is to create an app to store previous searches, profiles, and provide a widget of your chess.com consistency.</p>
-        <div class="image-container">
-          <img class="myImage2" alt="iOS screenshot" src="./static/ios-screenshot.png" />
+        <div class="container">
+          <h2 class="sub-header">iOS App (Coming Soon)</h2>
+          <p>The iOS app is currently under development. Our main goal is to create an app to store previous searches, profiles, and provide a widget of your chess.com consistency.</p>
+          <div class="image-container">
+            <img class="myImage2" alt="iOS screenshot" src="./static/ios-screenshot.png" />
+          </div>
         </div>
       </section>
     </main>

diff --git a/styles.css b/styles.css
@@ -253,7 +253,15 @@ h1 {
   border-radius: 2px;
 }
 
-/* Extension */
+/* Extension/iOS */
+
+.container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
 .extension {
   margin-bottom: 2em;
 }
@@ -262,7 +270,6 @@ h1 {
   max-width: 1200px;
   width: 100%;
 }
-/* iOS */
 .ios {
   margin-bottom: 2em;
 }