Explorar o código

Sophisticated Business: Fix column block responsive pattern

Takashi Irie %!s(int64=6) %!d(string=hai) anos
pai
achega
3b088bca42

+ 1 - 5
sophisticated-business/sass/blocks/_blocks.scss

@@ -903,11 +903,7 @@
 			padding-right: $size__spacing-unit;
 		}
 
-		@include media(mobile) {
-			flex-wrap: nowrap;
-		}
-
-		@include media(tablet) {
+		@include media(tabletalt) {
 
 			.wp-block-column {
 				margin-left: #{0.5 * $size__spacing-unit};

+ 6 - 0
sophisticated-business/sass/mixins/_utilities.scss

@@ -12,6 +12,12 @@
 		}
 	}
 
+	@if tabletalt == $res {
+		@media only screen and (min-width: $tablet_alt_width) {
+			@content;
+		}
+	}
+
 	@if desktop == $res {
 		@media only screen and (min-width: $desktop_width) {
 			@content;

+ 1 - 0
sophisticated-business/sass/variables-site/_structure.scss

@@ -12,6 +12,7 @@ $size__site-desktop-content: calc(6 * (100vw / 12) - 28px);
 
 $mobile_width: 600px;
 $tablet_width: 768px;
+$tablet_alt_width: 782px;
 $desktop_width: 1168px;
 $wide_width: 1379px;
 

+ 1 - 7
sophisticated-business/style-rtl.css

@@ -4294,13 +4294,7 @@ body.page .main-navigation {
   padding-left: 1rem;
 }
 
-@media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-columns {
-    flex-wrap: nowrap;
-  }
-}
-
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 782px) {
   .entry .entry-content .wp-block-columns .wp-block-column {
     margin-right: 0.5rem;
     margin-left: 0.5rem;

+ 1 - 7
sophisticated-business/style.css

@@ -4306,13 +4306,7 @@ body.page .main-navigation {
   padding-right: 1rem;
 }
 
-@media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-columns {
-    flex-wrap: nowrap;
-  }
-}
-
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 782px) {
   .entry .entry-content .wp-block-columns .wp-block-column {
     margin-left: 0.5rem;
     margin-right: 0.5rem;