Styling Alignwide and Alignfull

There are many tutorials out there showing how to style the alignfull and alignwide classes in the block editor. Most of theses tutorials use viewport units (vm) and this leaves one with a horizontal scroll. I know that using overflow hidden on one of the upstream containers hides the problem. But what should you do to actually solve the problem?

My late Dad used to say that most problems in life can be solved with pure mathematics. He was correct. Through trail and error I arrived at the following styling that works well if your content container has a width set as a percentage.

I do not think the styling needs any further explanation, the comments in the styling says it all.

This solution works well across all screen sizes. The alignfull class extends across the full-width of the screen and the alignwide class extends exactly halfway on both sides between the width of the content container and the edge of the screen.

Thanks for visiting.

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.