Last active
November 22, 2023 19:34
-
-
Save itsamoreh/18188535a67e39cf0c829d7ae3daf011 to your computer and use it in GitHub Desktop.
Fix for WordPress floated images going outside of contentSize area. Don't forget to change the calc values in the media query on line 35 to match your contentSize and gap. This file is PostCSS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* assets/css/alignments.css */ | |
| 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-left: calc((100% - var(--wp--style--global--content-size)) / 2); | |
| } | |
| > .alignright { | |
| margin-right: calc((100% - var(--wp--style--global--content-size)) / 2); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment