Merge pull request #2077 from rtCamp/fix/varia-image-gallery-issue

Varia & Child Themes: Fix Image Gallery alignment issues

varia/sass/abstracts/_responsive-logic.scss

@@ -126,62 +126,72 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 %responsive-alignright {
 
 	/*rtl:ignore*/
-	margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
 
 	@include media(mobile) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-sm}) );
+		max-width: calc( 0.5 * #{$content-width-sm} );
+		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 	}
 
 	@include media(tablet) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-md}) );
+		max-width: calc( 0.5 * #{$content-width-md} );
 	}
 
 	@include media(laptop) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 
 	@include media(desktop) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 
 	@include media(wide) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 }
 
 %responsive-alignleft {
 
 	/*rtl:ignore*/
-	margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 
 	@include media(mobile) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-sm}) );
+		max-width: calc( 0.5 * #{$content-width-sm} );
+		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
 	}
 
 	@include media(tablet) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-md}) );
+		max-width: calc( 0.5 * #{$content-width-md} );
 	}
 
 	@include media(laptop) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 
 	@include media(desktop) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 
 	@include media(wide) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );
 	}
 }
 

varia/sass/blocks/blog-posts/_editor.scss

@@ -19,7 +19,7 @@
 
 	&.image-alignbehind .post-has-image {
 		 .entry-wrapper {
-			padding: #{map-deep-get($config-global, "spacing", "vertical")};;
+			padding: #{map-deep-get($config-global, "spacing", "vertical")};
 		}
 
 		.cat-links {

varia/sass/blocks/blog-posts/_style.scss

@@ -18,7 +18,7 @@
 	}
 
 	&.image-alignbehind .post-has-image .entry-wrapper {
-		padding: #{map-deep-get($config-global, "spacing", "vertical")};;
+		padding: #{map-deep-get($config-global, "spacing", "vertical")};
 	}
 
 	&.is-grid article {

varia/sass/blocks/utilities/_style.scss

@@ -15,6 +15,9 @@
 }
 
 .entry-content > .alignleft {
+	/*rtl:ignore*/
+	float: left;
+
 	@extend %responsive-alignleft;
 }
 
@@ -43,6 +46,9 @@
 }
 
 .entry-content > .alignright {
+	/*rtl:ignore*/
+	float: right;
+
 	@extend %responsive-alignright;
 }
 

varia/sass/layout/_structure.scss

@@ -151,8 +151,17 @@
 	}
 
 	/* Reset alignleft and alignright margins after alignfull */
-	&.alignfull + .alignleft,
+	&.alignfull + .alignleft {
+		float: left;
+		margin-top: map-deep-get($config-global, "spacing", "vertical");
+		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+
 	&.alignfull + .alignright {
+		float: right;
 		margin-top: map-deep-get($config-global, "spacing", "vertical");
+		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
 	}
 }

varia/style-rtl.css

@@ -1007,9 +1007,18 @@ footer {
 	margin-bottom: 0;
 }
 
-.entry-content > *.alignfull + .alignleft,
+.entry-content > *.alignfull + .alignleft {
+	float: right;
+	margin-top: 32px;
+	margin-right: 16px;
+	margin-left: 16px;
+}
+
 .entry-content > *.alignfull + .alignright {
+	float: left;
 	margin-top: 32px;
+	margin-right: 16px;
+	margin-left: 16px;
 }
 
 /**
@@ -2396,6 +2405,10 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	margin-bottom: 32px;
 }
 
+.entry-content > .alignleft {
+	float: left;
+}
+
 /**
  * .aligncenter
  */
@@ -2418,6 +2431,10 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	margin-left: 16px;
 }
 
+.entry-content > .alignright {
+	float: right;
+}
+
 .entry-content * > .alignleft + *,
 .entry-content * > .alignright + * {
 	margin-top: 0;
@@ -3795,70 +3812,82 @@ img#wpstats {
 }
 
 .entry-content > .alignright {
-	margin-right: 16px;
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignright {
+		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
+		margin-left: 16px;
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 782px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
-	margin-left: 16px;
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
+		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
+		margin-right: 16px;
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 782px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 

varia/style.css

@@ -1007,9 +1007,18 @@ footer {
 	margin-bottom: 0;
 }
 
-.entry-content > *.alignfull + .alignleft,
+.entry-content > *.alignfull + .alignleft {
+	float: left;
+	margin-top: 32px;
+	margin-left: 16px;
+	margin-right: 16px;
+}
+
 .entry-content > *.alignfull + .alignright {
+	float: right;
 	margin-top: 32px;
+	margin-left: 16px;
+	margin-right: 16px;
 }
 
 /**
@@ -2399,6 +2408,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	margin-bottom: 32px;
 }
 
+.entry-content > .alignleft {
+	/*rtl:ignore*/
+	float: left;
+}
+
 /**
  * .aligncenter
  */
@@ -2423,6 +2437,11 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	margin-left: 16px;
 }
 
+.entry-content > .alignright {
+	/*rtl:ignore*/
+	float: right;
+}
+
 .entry-content * > .alignleft + *,
 .entry-content * > .alignright + * {
 	margin-top: 0;
@@ -3813,13 +3832,14 @@ img#wpstats {
 
 .entry-content > .alignright {
 	/*rtl:ignore*/
-	margin-right: 16px;
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
+		margin-left: 16px;
 	}
 }
 
@@ -3827,6 +3847,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
@@ -3834,6 +3855,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3841,6 +3863,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3848,18 +3871,20 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 	/*rtl:ignore*/
-	margin-left: 16px;
 }
 
 @media only screen and (min-width: 560px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
+		margin-right: 16px;
 	}
 }
 
@@ -3867,6 +3892,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
@@ -3874,6 +3900,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3881,6 +3908,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3888,6 +3916,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }