mobile and tablet layout of main done

Author: anastascho

src/css/footer.css

@@ -30,7 +30,7 @@ footer.footer {
   line-height: var(--footer-line-height);
   padding: 1.5rem;
   position: relative;
-  width: 100%;
+  width: auto;
 }
 
 .sections-footer-container {
@@ -49,10 +49,6 @@ footer.footer {
   color: var(--footer-link-font-color);
 }
 
-/* .sections-footer-container-left {
-  margin-left: 1rem;
-} */
-
 .sections-footer-container-right {
   margin: 0.25rem 1.25rem;
 }
@@ -63,20 +59,21 @@ footer.footer {
   font-size: 1rem;
 }
 
+@media screen and (max-width: 1024px) {
+  .sections-footer-container {
+    max-width: 52rem;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .sections-footer {
     line-height: unset;
     padding: 1rem;
-    /* max-width: 80%; */
   }
 
   .sections-footer-container {
     flex-direction: column-reverse;
     gap: 0.25rem;
     align-items: center;
   }
-
-  /* .sections-footer-container-left {
-    max-width: 80%;
-  } */
 }

src/css/header.css

@@ -294,8 +294,6 @@ body {
 }
 
 .sections-navbar {
-  /* background: white;
-  color: var(--navbar-font-color); */
   font-size: calc(16 / var(--rem-base) * 1rem);
   height: var(--navbar-height);
   top: 0;
@@ -317,7 +315,6 @@ body {
 .sections-navbar-brand .sections-navbar-item:first-child a {
   align-self: center;
   padding: 0;
-  /* color: var(--navbar-font-color); */
   font-size: calc(22 / var(--rem-base) * 1rem);
 }
 
@@ -436,10 +433,8 @@ body {
 }
 
 .sections-nav-list > li {
-  /* text-decoration: none; */
   margin-right: 1rem;
   font-size: 1.2rem;
-  /* font-weight: 400; */
   margin-top: 0.1rem;
 }
 
@@ -536,6 +531,16 @@ body {
   font-size: 1.25rem;
 }
 
+@media screen and (max-width: 1440px) {
+  .sections-navbar {
+    padding-left: 2.5rem;
+  }
+
+  .sections-navbar-menu {
+    margin-left: unset !important;
+  }
+}
+
 @media screen and (max-width: 1023.5px) {
   .sections-navbar {
     position: fixed;
@@ -701,13 +706,30 @@ body {
   }
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1440px) {
+@media screen and (min-width: 1024px) {
   .sections-navbar-menu {
-    margin-left: -16rem;
+    margin-left: -7rem;
+  }
+
+  .sections-navbar {
+    width: unset !important;
+  }
+
+  .sections-navbar-brand {
+    padding-left: 3.25rem !important;
+    padding-top: 0.3rem !important;
+  }
+
+  .sectionWhite-left {
+    padding-left: 1rem;
+  }
+
+  .sections-page > h1 {
+    padding-left: 2.5rem !important;
   }
 }
 
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 768px) {
   .sections-header {
     display: none;
   }

src/css/search.css

@@ -109,6 +109,13 @@
 
 /* Mobile */
 
+@media screen and (min-width: 1441px) {
+  .search-result-dropdown-menu {
+    margin-left: 2.5rem !important;
+    margin-top: -5.5rem !important;
+  }
+}
+
 @media screen and (min-width: 1024px) {
   .navbar-brand {
     flex-grow: 1;
@@ -164,18 +171,16 @@
     padding-right: 0;
   }
 
-  .search-result-dropdown-menu {
-    min-width: calc(100vw - 3.75rem);
-  }
-
   .search-input-landing {
     margin-top: 1.25rem;
     padding-right: 4rem;
     background-color: white;
+    width: 16.75rem !important;
   }
 
   .sections-page .search-result-dropdown-menu {
-    margin-top: -6rem !important;
+    min-width: calc(100vw - 3.75rem);
+    margin-top: -23rem !important;
   }
 
   .search-input-landing:hover {

src/css/sections.css

@@ -59,6 +59,7 @@
 
 .sectionWhite-left .paragraph {
   color: #496583;
+  /* padding-right: 2rem; */
 }
 
 .sectionWhite-right > div > div > div > img {
@@ -67,7 +68,7 @@
 }
 
 .sectionWhite-heading {
-  font-size: 2.2rem;
+  font-size: 2rem;
   line-height: 1.2;
   font-weight: bold;
   color: #496583;
@@ -270,7 +271,7 @@
 
 .innerTile > .content {
   background: transparent !important;
-  border: 6px solid var(--color-white) !important;
+  border: 4.5px solid var(--color-white) !important;
   border-radius: unset !important;
   text-align: center;
 }
@@ -285,34 +286,42 @@
 
 /* Mobile */
 
-@media screen and (max-width: 1140px) {
+@media screen and (max-width: 1440px) {
+  .sectionWhite .sectionWhite-heading {
+    padding-bottom: unset !important;
+  }
+}
+
+@media screen and (max-width: 1024px) {
   .sectionbody > .sectionPurple,
   .sectionbody > .sectionBlue,
   .sectionbody > .sectionWhite {
     height: unset;
   }
 
   .sectionWhite-heading-blue > p {
-    font-size: 1.25rem;
+    font-size: 2rem;
   }
-}
 
-@media screen and (max-width: 800px) {
-  .doc > h1 {
-    display: none;
+  .sectionWhite-heading-blue {
+    padding-top: unset !important;
   }
 
-  /* .sectionWhite-heading-blue > p {
-    font-size: 1.25rem;
+  .sectionWhite-heading {
+    padding: unset !important;
   }
 
-  .get-started-button {
-    padding: 0.5rem 2rem;
-    font-size: 0.5rem;
-  } */
+  .doc .image > img,
+  .doc .imageblock img {
+    max-width: 110%;
+  }
 }
 
 @media screen and (max-width: 768px) {
+  .doc > h1 {
+    display: none;
+  }
+
   .sections-page .sectionbody {
     /* max-width: 80% !important; */
     text-align: center;
@@ -321,7 +330,7 @@
   .sectionbody .tile {
     width: 80%;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 0.5rem 2rem;
   }
 
   .sectionbody .sectionTitle {
@@ -344,5 +353,44 @@
 
   .sectionWhite-heading {
     font-size: 1.75rem;
+    padding-top: 3rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+
+  .sectionWhite-right img {
+    float: unset !important;
+    margin-top: 1rem !important;
+    max-width: 80% !important;
+  }
+
+  .sectionbody .sectionPurple {
+    margin-bottom: 2rem !important;
+  }
+
+  .sectionWhite .sectionWhite-heading-blue {
+    padding: 0.5rem 0.1rem 1.5rem 0.1rem !important;
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .sectionbody .tile {
+    width: 100%;
+    padding: 0.5rem 0.25rem;
+  }
+
+  .sectionWhite .get-started-button {
+    padding: 0.75rem 3.5rem;
+  }
+
+  .sectionWhite-right img {
+    max-width: 100% !important;
+  }
+
+  main {
+    max-width: 375px;
+  }
+
+  .sectionWhite-heading {
+    padding-bottom: 0.25rem !important;
   }
 }