You may have noticed that left and right aligned images are not showing with text wrapped around them.

In this final video of the series, I will show you how to adjust the design of your Genesis theme to fix the display of left and right aligned images in our Gutenberg content.

Watch The Tutorial

Now that we have set up containers for non-wide and non-full width content, we need to adjust the way the images appear in the content.

This video will show you how to adjust the design of your Genesis theme for wide and full-width images in Gutenberg.

Watch The Tutorial

The next step in styling Gutenberg content in the Genesis Sample theme, is to take the non-wide and non full-width content and place them back into a container.

This video will take you through how to add CSS code to your stylesheet to set up a new content container set to be narrower than the wide and full-width content.

Watch The Tutorial

To first step in adjusting the design of any full-width Gutenberg content we publish, is to reset any container widths in our Genesis theme.

This video will take you through how to look at the structure of your site to determine what containers need to be adjusted, and the CSS code to use.

Watch The Tutorial

To adjust the design of any full-width Gutenberg content we publish, we are going to add a custom class in our Genesis theme to make adding the CSS code easier.

This video will take you through the code to add to your theme’s function file that adds a custom class for Gutenberg created content only.

Watch The Tutorial