Merge pull request #911 from siddarthkay/fix-max-width-on-large-screens

chore: set max-width for large screens and fix margins

Author: leecalcote

assets/scss/_footer_project.scss

@@ -11,6 +11,13 @@
   margin: -12px;
   font-family: $font-qanelas;
 
+  @media (min-width: $site-max-width) {
+    > * {
+      max-width: $site-max-width;
+      width: 100%;
+    }
+  }
+
   .d-header {
     height: 6rem;
     background-color: $white;

assets/scss/_styles_project.scss

@@ -790,6 +790,25 @@ html {
   scroll-behavior: smooth;
 }
 
+// Max-width constraint for large screens to prevent layout stretch
+@media (min-width: $site-max-width) {
+  .td-navbar {
+    > .container-fluid {
+      max-width: $site-max-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  .container-fluid.td-outer {
+    > .td-main {
+      max-width: $site-max-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   scroll-margin-top: 1rem;
 }

assets/scss/_variables_project.scss

@@ -114,6 +114,10 @@ $pagination-disabled-color: $gray-300 !default;
 $navbar-dark-color: rgba($white, 0.75) !default;
 $navbar-dark-hover-color: rgba($white, 0.35) !default;
 
+// Layout
+
+$site-max-width: 1920px;
+
 // Footer
 
 $list-inline-padding: $spacer;