• 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 5

Center align all non-Gutenberg content in Genesis

Videos in the 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

Adding a new content container to the Genesis Sample theme for non-wide and non full-width Gutenberg content.

In the previous video we looked at the HTML structure of content using Gutenberg blocks. We took the existing design code in the Genesis Sample theme, and changed it to remove existing content containers. The content should now appear 100% width of the screen.

The next step to styling our Gutenberg content in Genesis, is to take any content that is not using the wide and full-width option, and place it into a new container.

In this video we will add some additional CSS code to the Genesis Sample theme that creates the new container, and positions it into the center of the screen.

Video Instructions – click play

Text Instructions

To place the non-wide and non full-width content into a new content container, open the style.css file in your code editor.

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

.genesis-gutenberg .entry-header,
.genesis-gutenberg .entry-content > *:not( .alignwide ):not( .alignfull ),
.genesis-gutenberg .entry-footer,
.genesis-gutenberg #comments,
.genesis-gutenberg #respond {
	max-width:60%;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

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 © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.