fixed small screen responsive bug

src/components/AboutPage.vue

@@ -51,6 +51,12 @@ a {
   padding-left: 20px;
 }
 
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 30px;
+  }
+}
+
 </style>
 
 <template>

src/components/EditorNote.vue

@@ -54,6 +54,18 @@ a {
   padding-top: 70px;
 }
 
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 30px;
+  }
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+    padding-left: 50px;
+
+  }
+}
+
 </style>
 
 <template>

src/components/MenuBar.vue

@@ -1,9 +1,9 @@
 <template>
-<b-row class="mb-5-menu">
+<b-row>
-   <b-navbar fixed=top>
+   <b-navbar fixed=top toggleable="md">
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
-       <b-nav align="right">
+       <b-nav align="left">
           <b-nav-item to='/'>Home</b-nav-item>
           <b-nav-item to='/about'>About</b-nav-item>
           <b-nav-item to='/editornote'>Editor's note</b-nav-item>
@@ -21,18 +21,24 @@ export default {
 </script>
 
 <style scoped>
-@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 
-* {
-  max-width: 100%;
-}
 a {
   color: #333042;
-  font-family: 'Permanent Marker', cursive;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 16px;
+  text-shadow: 1px 1px 1px #333042;
 }
 
 a:hover {
   color: #ff4c2b;
+  text-shadow: 1px 1px 1px #ff4c2b;
+
+}
+
+@media (max-width: 575px) {
+  a {
+    font-size: 12px;
+
+  }
 }
 </style>

src/components/SplashPage.vue

@@ -11,6 +11,11 @@
 
 }
 
+body {
+  background-color: #ffe6e6;
+  min-height: 100vh;
+}
+
 a:hover {
   color: #333042;
   text-decoration: none;
@@ -60,9 +65,21 @@ a {
 }
 
 #sparkle {
-  padding-top: 50px;
+  padding-top: 80px;
 }
 
+@media (max-width: 575px) {
+  #mag_title {
+    font-size: 60px;
+    padding-top: 20px;
+    padding-left: 20px;
+  }
+  #mag_subtitle {
+    font-size: 18px;
+    padding-left: 20px;
+margin-top: 20px;
+}
+}
 
 </style>
 

src/components/bbq.vue

@@ -65,6 +65,17 @@ a {
 .bbq_images {
   padding-top: 40px;
 }
+
+@media (max-width: 575px){
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+
+  }
+  .title_story {
+    font-size: 30px;
+  }
+}
 </style>
 
 <template>

src/components/breakfast.vue

@@ -68,6 +68,18 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+   
 </style>
 
 <template>

src/components/cake.vue

@@ -75,6 +75,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+@media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+
 </style>
 
 <template>

src/components/cart.vue

@@ -66,6 +66,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+@media (max-width: 575px){
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+
+  }
+  .title_story {
+    font-size: 30px;
+  }
+}
+
 </style>
 
 <template>

src/components/eggs.vue

@@ -68,6 +68,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>

src/components/leekpilaf.vue

@@ -59,6 +59,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>

src/components/noodles.vue

@@ -68,6 +68,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
+
 </style>
 
 <template>

src/components/onion.vue

@@ -73,6 +73,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
+      
 </style>
 
 <template>

src/components/pesto.vue

@@ -44,7 +44,7 @@ a {
 }
 
 .image_container {
-  padding-top: 10px;
+  padding-top: 40px;
 }
 
 .author {
@@ -68,6 +68,17 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 30px;
+     }
+   }
+
 </style>
 
 <template>

src/components/pretzel.vue

@@ -70,6 +70,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>

src/components/recipe.vue

@@ -69,6 +69,16 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>

src/components/ricecooker.vue

@@ -53,6 +53,17 @@ a {
 
 .zoom:hover {
    transform: scale(1.1);}
+
+   @media (max-width: 575px){
+        .small_icon {
+          max-width: 50%;
+          padding-top: 20px;
+
+        }
+        .title_story {
+          font-size: 30px;
+        }
+      }
 </style>
 
 <template>

src/components/scooter.vue

@@ -32,7 +32,7 @@ a {
   padding-top: 40px;
   font-family: 'Roboto Mono', monospace;
   font-size: 15px;
-  padding-left: 150px;
+  padding-left: 100px;
 }
 
 .title_story {
@@ -65,6 +65,20 @@ a {
 .zoom:hover {
    transform: scale(1.1);}
 
+   @media (max-width: 575px){
+     .small_icon {
+       max-width: 50%;
+       padding-top: 20px;
+
+     }
+     .title_story {
+       font-size: 25px;
+     }
+     .content_poem {
+       padding-right: 20px;
+       padding-left: 60px;
+     }
+   }
 
 
 </style>