반응형 헤더 적용 > 미디어 쿼리

assets/scss/_instructor_header.scss

@@ -52,6 +52,10 @@
 
       &-title {
         font-size: 35px;
+
+        @media screen and (max-width: 650px) {
+          font-size: 15px;
+        }
       }
     }
 
@@ -68,6 +72,10 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+
+      @media screen and (max-width: 700px) {
+        display: none;
+      }
     }
 
     &-button {

components/shared/Header.vue

@@ -12,7 +12,7 @@
       <figure class="image is-48x48 m-r-sm">
         <img class="is-rounded" :src="user.avatar">
       </figure>
-      <div class="m-r-sm m-b-sm">
+      <div class="m-r-sm">
         Welcome {{user.username}}!
       </div>
     </div>
@@ -50,7 +50,7 @@ export default {
   .user-box {
     align-items: center;
     display: flex;
-    flex-wrap: wrap;
+    
     justify-content: flex-start;
     margin-right: 10px;
     font-size: 17px;

components/shared/Navbar.vue

@@ -118,6 +118,10 @@ export default {
   }
   .navbar-brand {
     padding-right: 30px;
+
+    @media screen and (max-width: 1023px) {
+      padding-right: 0px;
+    }
   }
   .avatar {
     margin-right: 5px;