maybe fix mobile margin right issues

OSU-Sustainability-Office · Aug 7, 2023 · 483e04b · 483e04b
1 parent 94be646
commit 483e04b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -139,6 +139,7 @@ body {
 <style scoped lang="scss">
 @import '@/assets/style-variables.scss';
 
+@media screen and (max-width: 768px) {
 .app {
  padding: 0;
  margin: 0;
@@ -147,6 +148,7 @@ body {
  left: 0;
  width: 100%;
  min-height: 100%;
+ width: 100%;
 }
 .header {
  margin: 0;
@@ -166,4 +168,35 @@ body {
  padding: 0;
  width: 100%;
 }
+}
+
+@media screen and (min-width: 769px) {
+.app {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: 100%;
+}
+.header {
+ margin: 0;
+ padding: 0;
+ height: $--nav-height;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.main {
+ position: absolute;
+ top: $--nav-height;
+ left: 0;
+ min-height: calc(100% - #{$--nav-height});
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+}
 </style>
diff --git a/src/components/navBar.vue b/src/components/navBar.vue
@@ -98,6 +98,7 @@ i {
  padding: 27px 30px;
  transition: all 0.2s ease-out;
  left: 20px;
+ margin-right: 20px;
  align-items: end;
  top: -50px;
  }