From the course: WordPress Content Blocks: Working with Themes

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add styles for wide alignments

Add styles for wide alignments - WordPress Tutorial

From the course: WordPress Content Blocks: Working with Themes

Start my 1-month free trial

Add styles for wide alignments

“

- [Instructor] To be able to style these wide and full alignments, we first need to know what actually happens when they are applied to blocks. Here we have two images, one that's align wide, the other one is align full, and if we jump to the front-end and inspect the markup here, you'll see each of these images is a figure element that has wp-block-image, and then it says either alignwide or alignfull. So these are just two classes that are applied. This is exactly how WordPress has handled alignments for a long time, so if you align things right, it gets a class alignright, alignleft, alignleft, and so on, and so we're just extending this functionality with two new classes that can be targeted using CSS. But this is where things get interesting. In some cases, a theme will have a one-column centered layout similar to 2019, and making the wide and full alignments is pretty straightforward, you just split up the available width, and then you align everything to the viewport. However…

Contents