Browse Source

Sophisticated Business: Standardize the side margin on Media & Text block contents

Danny Dudzic 6 years ago
parent
commit
970154ac2e

+ 2 - 2
modern-business/sass/blocks/_blocks.scss

@@ -213,7 +213,7 @@
 			}
 
 			.wp-block-media-text__content {
-				padding: 0 #{2 * $size__vertical-spacing-unit} 0 0;
+				padding: 0;
 			}
 
 			&.alignfull {
@@ -228,7 +228,7 @@
 			}
 
 			&.has-media-on-the-right .wp-block-media-text__content {
-				padding: 0 0 0 #{2 * $size__vertical-spacing-unit};
+				padding: 0;
 			}
 
 		}

+ 20 - 3
sophisticated-business/sass/blocks/_blocks.scss

@@ -843,12 +843,21 @@
 			padding: 0 1rem;
 
 			@include media(tablet) {
-				padding-left: 4.5%;
+				padding-left: 8%;
+				padding-right: 8%;
+				margin-left: 0;
+			}
+
+			@include media(desktop) {
+				padding-left: 1rem;
+				padding-right: 1rem;
 				margin-left: 7.5%;
 			}
 		}
 
 		.wp-block-media-text__content {
+			padding-left: 1rem;
+			padding-right: 1rem;
 
 			h1, h2, h3, h4, h5, h6 {
 				text-align: left;
@@ -867,8 +876,7 @@
 		@include media(tablet) {
 
 			.wp-block-media-text__content {
-				padding-left: 4.5%;
-				margin-left: 7.5%;
+				margin-left: 0;
 			}
 
 			&.alignfull + .wp-block-media-text {
@@ -876,6 +884,15 @@
 			}
 		}
 
+		@include media(desktop) {
+
+			.wp-block-media-text__content {
+				padding-left: 8%;
+				padding-right: 8%;
+				margin-left: 0;
+			}
+		}
+
 		// Temporary fix for IE 11 for this issue: https://github.com/WordPress/gutenberg/issues/11577
 		@media all and (-ms-high-contrast:none) {
 

+ 24 - 3
sophisticated-business/style-rtl.css

@@ -4200,11 +4200,25 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-    padding-right: 4.5%;
+    padding-right: 8%;
+    padding-left: 8%;
+    margin-right: 0;
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
+    padding-right: 1rem;
+    padding-left: 1rem;
     margin-right: 7.5%;
   }
 }
 
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
 .entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
   text-align: right;
 }
@@ -4222,14 +4236,21 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding-right: 4.5%;
-    margin-right: 7.5%;
+    margin-right: 0;
   }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -32px;
   }
 }
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+    padding-right: 8%;
+    padding-left: 8%;
+    margin-right: 0;
+  }
+}
+
 @media all and (-ms-high-contrast: none) {
   .entry .entry-content .wp-block-media-text:after {
     display: table;

+ 24 - 3
sophisticated-business/style.css

@@ -4212,11 +4212,25 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-    padding-left: 4.5%;
+    padding-left: 8%;
+    padding-right: 8%;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
+    padding-left: 1rem;
+    padding-right: 1rem;
     margin-left: 7.5%;
   }
 }
 
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
   text-align: left;
 }
@@ -4234,14 +4248,21 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding-left: 4.5%;
-    margin-left: 7.5%;
+    margin-left: 0;
   }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -32px;
   }
 }
 
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+    padding-left: 8%;
+    padding-right: 8%;
+    margin-left: 0;
+  }
+}
+
 @media all and (-ms-high-contrast: none) {
   .entry .entry-content .wp-block-media-text:after {
     display: table;