- Prevent jumping around of elements.

- Set a maximum width for the content.
- Enlarge certain elements for mobile

gitlab-pages/website/static/css/custom.css

@@ -109,6 +109,10 @@ footnote {
   display: none;
 }
 
+.fixedHeaderContainer {
+  left: 0;
+}
+
 .nav-footer {
   background: var(--color-primary-text);
 }
@@ -122,11 +126,10 @@ footnote {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  padding: var(--padding-level-3);
 }
 
 .home-text {
-  width: 35%;
+  flex: 1;
 }
 
 .sample-code-container {
@@ -194,6 +197,11 @@ blockquote {
   color: rgba(255, 255, 255, 1);
 }
 
+.tab-pane {
+  height: 550px;
+  overflow-x: auto;
+}
+
 blockquote code {
   opacity: 0.5;
 }
@@ -261,6 +269,11 @@ html {
   background: white;
 }
 
+body {
+  margin: 0 auto;
+  max-width: 1500px;
+}
+
 .copyright a {
   color: #b2210c;
 }
@@ -563,33 +576,45 @@ body
   }
 }
 
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+@media only screen and (min-device-width: 360px){
-}
-
-@media only screen and (max-width: 1023px) {
   .home-container {
-    flex-direction: column-reverse;
+    flex-direction: column;
-    margin-top: var(--padding-level-1);
-  }
-  .home-text {
     align-content: center;
-    text-align: center;
-    width: 90%;
-    padding-top: var(--padding-level-2);
   }
+
+  .home-text {
+    text-align: center;
+    padding: var(--padding-level-2) 0;
+  }
+
   .sample-code-container {
     width: 90%;
   }
+  
+  .sample-code {
+    padding: 0;
+    width: 100%;
+  }
 }
 
 @media only screen and (min-width: 1280px) {
-}
+  .home-container {
+    flex-direction: row;
+    margin: var(--padding-level-1);    
+    max-width: 90%;
+    padding: var(--padding-level-3);
+  }
 
-@media only screen and (min-width: 1440px) {
   .landing h4.tagline-text {
     font-size: 2.25rem;
   }
-}
 
-@media only screen and (min-width: 1500px) {
+  .sample-code-container {
+    max-width: 60%;
+  }
+
+  .sample-code {
+    padding: 25px;
+    width: 80%;    
+  }
 }