Videos in this series
- Introduction
- Adding Wide and Full support to Genesis
- Adding a custom class for Gutenberg content to Genesis
- Remove existing Genesis content containers for Gutenberg content
- Add a new Genesis content container for non-wide and non-full width Gutenberg content
- Adjusting the appearance of Gutenberg wide and full-width content in Genesis
- Adjusting the Genesis theme for left and right aligned images
Adjusting the appearance of Gutenberg wide and full-width content in the Genesis theme.
In the previous video we made adjustments to the design of the Genesis theme so the non-wide and non-full width content are in their own container.
We now want to adjust the appearance of the wide and full-width images in the Gutenberg created content. The wide images should appear slightly wider than the rest of the content, and full-width images should appear 100% width of the screen.
In this video I will add some more CSS code to the Genesis theme style.css file to target the wide and full-width Gutenberg content.
Video Instructions – click play
Text Instructions
To adjust the design of the Gutenberg wide and full images in your Genesis theme, open the style.css file of your theme in your code editor.
Copy the below code and paste it into the style.css file.
.genesis-gutenberg .alignwide {
max-width: 75%;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.genesis-gutenberg .alignfull {
max-width: 100%;
width: 100%;
}