Fix content becoming scrollable on front page

Author: PeeterPaal

sources/stylesheets/_variables.scss

@@ -37,3 +37,4 @@ $max-page-width: 1440px;
 
 $mobile-width: 640px;
 $tablet-width: 900px;
+$desktop-width: 1440px;

sources/stylesheets/layouts/_front-page.scss

@@ -47,6 +47,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    max-width: $max-page-width;
 
     .content-formatted {
       width: 100%;
@@ -60,6 +61,10 @@
     }
   }
 
+  .split-section {
+    max-width: $max-page-width;
+  }
+
   .split_dominant_right {
     display: flex;
     flex-direction: column;
@@ -93,14 +98,11 @@
   }
 }
 
-@media screen and (max-width: $tablet-width) {
+@media (max-width: $desktop-width) {
   .front-page {
     .front-page-wrapper {
-      padding: 24px;
-    }
-
-    .hero {
-      min-height: auto;
+      padding: 0;
+      max-width: calc(100vw - 48px);
     }
 
     .split_dominant_right,
@@ -110,10 +112,28 @@
       }
 
       .split-section {
-        grid-template-columns: 1fr;
+        grid-template-columns: calc(100vw - 48px);
+      }
+    }
+
+    .column {
+      .split-section {
+        max-width: calc(100vw - 48px);
       }
     }
 
+    .hero {
+      max-width: calc(100vw - 48px);
+    }
+  }
+}
+
+@media screen and (max-width: $tablet-width) {
+  .front-page {
+    .hero {
+      min-height: auto;
+    }
+
     .column .split-section {
       display: flex;
       flex-direction: column;

stylesheets/main.css

@@ -826,6 +826,7 @@ body.edy-checkout-button-visible {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  max-width: 1440px;
 }
 .front-page .hero .content-formatted {
   width: 100%;
@@ -834,6 +835,9 @@ body.edy-checkout-button-visible {
 .front-page .split_even .hero {
   width: 50%;
 }
+.front-page .split-section {
+  max-width: 1440px;
+}
 .front-page .split_dominant_right {
   display: flex;
   flex-direction: column;
@@ -860,20 +864,29 @@ body.edy-checkout-button-visible {
   color: var(--darkmode-color);
 }
 
-@media screen and (max-width: 900px) {
+@media (max-width: 1440px) {
   .front-page .front-page-wrapper {
-    padding: 24px;
-  }
-  .front-page .hero {
-    min-height: auto;
+    padding: 0;
+    max-width: calc(100vw - 48px);
   }
   .front-page .split_dominant_right .hero,
   .front-page .split_even .hero {
     width: 100%;
   }
   .front-page .split_dominant_right .split-section,
   .front-page .split_even .split-section {
-    grid-template-columns: 1fr;
+    grid-template-columns: calc(100vw - 48px);
+  }
+  .front-page .column .split-section {
+    max-width: calc(100vw - 48px);
+  }
+  .front-page .hero {
+    max-width: calc(100vw - 48px);
+  }
+}
+@media screen and (max-width: 900px) {
+  .front-page .hero {
+    min-height: auto;
   }
   .front-page .column .split-section {
     display: flex;