Fix wordpress left and right float alignments

itsamoreh · Aug 8, 2023 · 4ee2f17 · 4ee2f17
1 parent 0327cd3
commit 4ee2f17
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/assets/css/alignments.css b/assets/css/alignments.css
@@ -1,16 +1,43 @@
-@media (min-width: 1000px) {
-	body {
-		.is-layout-constrained {
+body {
+	.is-layout-constrained {
+		> .alignleft {
+			margin: var(--wp--custom--spacing--gap);
+			margin-left: 0;
+			padding-left: 0;
+		}
+
+		> .alignright {
+			margin: var(--wp--custom--spacing--gap);
+			margin-right: 0;
+			padding-right: 0;
+		}
+
+		/*
+			Center floated images on small screens.
+		*/
+		@media (max-width: 480px) {
+			> .alignleft {
+				float: none;
+				margin: var(--wp--custom--spacing--gap) auto;
+			}
+
+			> .alignright {
+				float: none;
+				margin: var(--wp--custom--spacing--gap) auto;
+			}
+		}
+
+		/*
+			Prevent floated images from going outside of the contentSize area.
+			calc( var(--wp--style--global--content-size) + var(--wp--custom--spacing--gap) * 2 )
+		*/
+		@media (min-width: calc(1000px + 24px * 2)) {
 			> .alignleft {
-				margin: var(--wp--custom--spacing--gap);
 				margin-left: calc((100% - var(--wp--style--global--content-size)) / 2);
-				padding-left: 0;
 			}
 
 			> .alignright {
-				margin: var(--wp--custom--spacing--gap);
 				margin-right: calc((100% - var(--wp--style--global--content-size)) / 2);
-				padding-right: 0;
 			}
 		}
 	}