Browse Source

Varia: Revise .alignfull logic on mobile to stretch to the edge of the viewport

Allan Cole 6 years ago
parent
commit
a3924a3498
3 changed files with 35 additions and 3 deletions
  1. 11 1
      varia/sass/abstracts/_responsive-logic.scss
  2. 12 1
      varia/style-rtl.css
  3. 12 1
      varia/style.css

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

@@ -93,7 +93,17 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 }
 
 %responsive-alignfull {
-	/* Letting the box-model do all the work here. */
+
+	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});
+
+	/* Letting the box-model do most of the work here. */
+	@include media(mobile) {
+		margin-left: inherit;
+		margin-right: inherit;
+		width: inherit;
+	}
 }
 
 %responsive-alignright {

+ 12 - 1
varia/style-rtl.css

@@ -3253,7 +3253,18 @@ img#wpstats {
 }
 
 .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-	/* Letting the box-model do all the work here. */
+	margin-right: -16px;
+	margin-left: -16px;
+	width: calc(100% + 32px);
+	/* Letting the box-model do most of the work here. */
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+		margin-right: inherit;
+		margin-left: inherit;
+		width: inherit;
+	}
 }
 
 .entry-content > .alignright {

+ 12 - 1
varia/style.css

@@ -3258,7 +3258,18 @@ img#wpstats {
 }
 
 .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
-	/* Letting the box-model do all the work here. */
+	margin-left: -16px;
+	margin-right: -16px;
+	width: calc(100% + 32px);
+	/* Letting the box-model do most of the work here. */
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
+		margin-left: inherit;
+		margin-right: inherit;
+		width: inherit;
+	}
 }
 
 .entry-content > .alignright {