Merge pull request #2145 from rtCamp/fix/morden-image-gallery-issue

Morden: Fix Gallery Alignment Issue causing from setting max-width in desktop

morden/sass/_extra-child-theme.scss

@@ -25,7 +25,7 @@ a {
 
 	@include media(desktop) {
 		box-shadow: 0 0 30px rgba(#000, 0.2);
-		max-width: 1134px;
+		max-width: $content-width-xxl;
 	}
 }
 
@@ -247,6 +247,86 @@ body {
 /**
  * Blocks
  */
+
+// Add space for floated content
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+	.entry-content > .alignright {
+		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 640px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 782px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 1024px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 1280px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 1280px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 // Cover & Hero block
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-coblocks-hero .wp-block-coblocks-hero__box {

morden/style-rtl.css

@@ -3987,7 +3987,7 @@ p:not(.site-title) a:hover {
 @media only screen and (min-width: 1024px) {
 	#page {
 		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-		max-width: 1134px;
+		max-width: calc( 1280px - 32px);
 	}
 }
 
@@ -4189,6 +4189,76 @@ p:not(.site-title) a:hover {
 /**
  * Blocks
  */
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: 16px;
+	}
+	.entry-content > .alignright {
+		margin-right: 16px;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - 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-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - 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-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - 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-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-coblocks-hero .wp-block-coblocks-hero__box > * {
 	margin-top: 21.312px;

morden/style.css

@@ -4016,7 +4016,7 @@ p:not(.site-title) a:hover {
 @media only screen and (min-width: 1024px) {
 	#page {
 		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-		max-width: 1134px;
+		max-width: calc( 1280px - 32px);
 	}
 }
 
@@ -4218,6 +4218,76 @@ p:not(.site-title) a:hover {
 /**
  * Blocks
  */
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: 16px;
+	}
+	.entry-content > .alignright {
+		margin-left: 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 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - 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 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - 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 * (100% - 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 * (100% - 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 * (100% - 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 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-coblocks-hero .wp-block-coblocks-hero__box > * {
 	margin-top: 21.312px;