Parcourir la source

Varia: Fixes spacing issues in fullwidth images on mobile screens
- Also fixes widewidth blocks on mobile screens

Allan Cole il y a 5 ans
Parent
commit
adb7ac5242

+ 4 - 1
varia/sass/abstracts/_responsive-logic.scss

@@ -40,7 +40,8 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 
 %responsive-alignwide {
 
-	@include alignwide-width( $content-width-flex );
+	width: 100%;
+	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 
@@ -97,12 +98,14 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	margin-left: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
 	margin-right: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
 	width: calc(100% + #{$horizontal-padding});
+	max-width: calc(100% + #{$horizontal-padding});
 
 	/* Letting the box-model do most of the work here. */
 	@include media(mobile) {
 		margin-left: inherit;
 		margin-right: inherit;
 		width: inherit;
+		max-width: inherit;
 	}
 }
 

+ 0 - 4
varia/sass/blocks/utilities/_style.scss

@@ -57,10 +57,6 @@
 	@extend %responsive-aligndefault;
 }
 
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
-}
-
 /**
  * .alignwide
  */

+ 4 - 6
varia/style-rtl.css

@@ -1975,10 +1975,6 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
-}
-
 /**
  * .alignwide
  */
@@ -3161,8 +3157,8 @@ img#wpstats {
 }
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	width: calc(100% + 256px);
-	max-width: calc(100% - 32px);
+	width: 100%;
+	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
 }
@@ -3248,6 +3244,7 @@ img#wpstats {
 	margin-right: -16px;
 	margin-left: -16px;
 	width: calc(100% + 32px);
+	max-width: calc(100% + 32px);
 	/* Letting the box-model do most of the work here. */
 }
 
@@ -3256,6 +3253,7 @@ img#wpstats {
 		margin-right: inherit;
 		margin-left: inherit;
 		width: inherit;
+		max-width: inherit;
 	}
 }
 

+ 4 - 6
varia/style.css

@@ -1980,10 +1980,6 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class*="inner-container"] {
-	max-width: inherit;
-}
-
 /**
  * .alignwide
  */
@@ -3178,8 +3174,8 @@ img#wpstats {
 }
 
 .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
-	width: calc(100% + 256px);
-	max-width: calc(100% - 32px);
+	width: 100%;
+	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -3265,6 +3261,7 @@ img#wpstats {
 	margin-left: -16px;
 	margin-right: -16px;
 	width: calc(100% + 32px);
+	max-width: calc(100% + 32px);
 	/* Letting the box-model do most of the work here. */
 }
 
@@ -3273,6 +3270,7 @@ img#wpstats {
 		margin-left: inherit;
 		margin-right: inherit;
 		width: inherit;
+		max-width: inherit;
 	}
 }