モバイルヘッダーがレイアウトシフトする不具合修正

xserver-inc · Apr 8, 2024 · fbf7b9f · fbf7b9f
1 parent 032906c
commit fbf7b9f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 21 deletions.
diff --git a/amp.css b/amp.css
@@ -7741,6 +7741,7 @@ div.fb-like-mobile {
   margin: 0;
   list-style: none;
   display: none;
+  justify-content: space-between;
   align-items: center;
   line-height: 1.4;
   min-height: 50px;
@@ -7760,7 +7761,7 @@ div.fb-like-mobile {
 }
 .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7785,6 +7786,9 @@ div.fb-like-mobile {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+.mobile-footer-menu-buttons .menu-button {
+  width: 100%;
+}
 
 .logo-menu-button {
   text-align: center;
@@ -10153,13 +10157,9 @@ pre {
   .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .has-logo-button .menu-button {
-    width: 70px;
-  }
   .has-logo-button .logo-menu-button {
     flex-grow: 99;
   }

diff --git a/css/admin.css b/css/admin.css
@@ -7303,6 +7303,7 @@ body.wp-admin {
   margin: 0;
   list-style: none;
   display: none;
+  justify-content: space-between;
   align-items: center;
   line-height: 1.4;
   min-height: 50px;
@@ -7322,7 +7323,7 @@ body.wp-admin {
 }
 .admin-settings .demo .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7346,6 +7347,9 @@ body.wp-admin {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+.admin-settings .demo .mobile-footer-menu-buttons .menu-button {
+  width: 100%;
+}
 .admin-settings .demo .logo-menu-button {
   text-align: center;
   font-weight: 900;
@@ -15715,6 +15719,7 @@ body.wp-admin {
   margin: 0;
   list-style: none;
   display: none;
+  justify-content: space-between;
   align-items: center;
   line-height: 1.4;
   min-height: 50px;
@@ -15734,7 +15739,7 @@ body.wp-admin {
 }
 .admin-settings .demo .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -15758,6 +15763,9 @@ body.wp-admin {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+.admin-settings .demo .mobile-footer-menu-buttons .menu-button {
+  width: 100%;
+}
 .admin-settings .demo .logo-menu-button {
   text-align: center;
   font-weight: 900;
@@ -18687,13 +18695,9 @@ body.wp-admin {
   .admin-settings .demo .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .admin-settings .demo .has-logo-button .menu-button {
-    width: 70px;
-  }
   .admin-settings .demo .has-logo-button .logo-menu-button {
     flex-grow: 99;
   }

diff --git a/scss/_mobile-menu-buttons.scss b/scss/_mobile-menu-buttons.scss
@@ -12,6 +12,7 @@
   list-style: none;
 
   display: none;
+  justify-content: space-between;
   align-items: center;
 
   line-height: 1.4;
@@ -35,7 +36,7 @@
 
   .menu-button {
     position: relative;
-    width: 100%;
+    width: 70px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -65,6 +66,9 @@
 .mobile-footer-menu-buttons {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+  .menu-button{
+    width: 100%;
+  }
 }
 
 .logo-menu-button {

diff --git a/scss/breakpoints/_max-width-1023.scss b/scss/breakpoints/_max-width-1023.scss
@@ -94,16 +94,15 @@ div.sidebar {
 .mobile-header-menu-buttons {
   top: 0;
   bottom: auto;
-  justify-content: space-around;
   min-width: 46px;
   // z-index: 3;
   box-shadow: 0 0 5px darkgrey;
 }
 
 .has-logo-button {
-  .menu-button {
-    width: 70px;
-  }
+  // .menu-button {
+  //   width: 70px;
+  // }
 
   .logo-menu-button {
     flex-grow: 99;

diff --git a/style.css b/style.css
@@ -7766,6 +7766,7 @@ div.fb-like-mobile {
   margin: 0;
   list-style: none;
   display: none;
+  justify-content: space-between;
   align-items: center;
   line-height: 1.4;
   min-height: 50px;
@@ -7785,7 +7786,7 @@ div.fb-like-mobile {
 }
 .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7810,6 +7811,9 @@ div.fb-like-mobile {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+.mobile-footer-menu-buttons .menu-button {
+  width: 100%;
+}
 
 .logo-menu-button {
   text-align: center;
@@ -11281,13 +11285,9 @@ _:-ms-lang(x), .mc-circle {
   .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .has-logo-button .menu-button {
-    width: 70px;
-  }
   .has-logo-button .logo-menu-button {
     flex-grow: 99;
   }