• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Nifticious

building seriously nifty websites, minus the geekery

  • Genesis
  • Rainmaker

Making your Genesis theme Gutenberg ‘compatible’ pt 7

Adjusting the align left and right images added via the Gutenberg editor.

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 Genesis design for left and right aligned images added in the Gutenberg editor.

In the previous video we adjusted the Genesis theme to display the wide and full-width images correctly. The final step in this series is to fix an issue  you may have spotted after the new content container code was applied.

The CSS code we applied to the Genesis theme style.css file for the new content container is affecting the appearance of left and right align images.

The text is no longer wrapping around the left and right aligned images and is making the post layout disjointed.

To fix this issue, we need to apply some separate CSS code to the left and right aligned images so they text wraps around them again.

Video Instructions – click play

Text Instructions

To adjust the design of the left and right aligned images in the Gutenberg content, open the style.css file of your Genesis theme in your code editor.

Copy the below code and paste it into the style.css file.

.genesis-gutenberg .post-thumbnail img,
.genesis-gutenberg .alignwide img,
.genesis-gutenberg .alignfull img {
	width: 100%;
}

.genesis-gutenberg .alignleft img,
.genesis-gutenberg .alignleft figcaption {
	display: block;
	float: left;
	width: 60%;
	margin-right: 2em;
}

.genesis-gutenberg .alignright img,
.genesis-gutenberg .alignright figcaption {
	display: block;
	float: right;
	width: 60%;
	margin-left: 2em;
}

Filed Under: Genesis Framework Tagged With: Gutenberg

Primary Sidebar

Hi There 👋, it's great to see you!

I promise I'm not spying on you, but I've noticed you've watched a few tutorials on how to do more with the Rainmaker Platform.

If you are looking to hire someone that can help you with your Rainmaker website, head over to my Contact page and send me an email.

But if you just want to keep watching the free tutorials, that's absolutely fine.

Happy Browsing 😀

Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress · Log in