Media queries improvements

assets/css/partials/footer.css

@@ -33,7 +33,7 @@ footer #copyright {
   font-size: 0.875rem;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
   footer {
     padding: 3rem 5rem;
 

assets/css/partials/header.css

@@ -89,8 +89,9 @@ header #nav-toggler {
   cursor: pointer;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
   header, nav {
+    margin: 1.5rem auto;
     padding: 0.938rem 1.25rem;
   }
 

assets/js/partials/header.js

@@ -12,13 +12,13 @@ function loadBurger() {
   mobileNavigation.style.top = burgerOpen
     ? `calc(${header.getBoundingClientRect().y}px + ${
         header.getBoundingClientRect().height
-      }px + 0.625rem)`
+      }px)`
     : 'initial';
   mobileNavigation.style.left = burgerOpen
     ? `${headerInitialLeftPosition}px`
     : 'initial';
   document.querySelector('main').style.marginTop = burgerOpen
-    ? `calc(${header.getBoundingClientRect().height}px + 5rem)`
+    ? `calc(${header.getBoundingClientRect().height}px + 3rem)`
     : '0px';
 }
 
@@ -33,7 +33,7 @@ function resetBurger() {
 }
 
 function resetBurgerWhenWindowResized() {
-  if (window.innerWidth > 768) {
+  if (window.innerWidth > 1024) {
     resetBurger();
   }
 }