[Resolved] Image and Text in Gutenberg

[Robert]

I am starting a new website project and am trying Gutenberg. I am struggling with the very simple task of making an image align with text the way I want. This is the test website:
http://www.mofsa.org/test2

You will see three menu choices at top. “Classic” shows using the Classic Editor plugin and doing image and text the way I am used to doing it, and it works fine.

My task is to do a makeover of this website: http://www.sma-us.org. I want to use GP, and I hoped to use Gutenberg.

But when I used the Gutenberg editor, the text is indented from the title, and the image does not align at the top. “Gutenberg” menu choice.

“Full Width” shows another attempt, and that looks terrible!!

Any suggestions? If there is not an easy fix, I think I want to stick with the Classic Editor plugin for this project.

[Leo]

Hi there,

So by default Gutenberg both texts and image center as illustrated here:
https://www.screencast.com/t/oSxrS3V8W

We can use this CSS to change that:

.wp-block-media-text .wp-block-media-text__content {
    padding-left: 0;
}
.wp-block-media-text {
    align-items: inherit;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Robert]

Thanks, Leo. That worked perfectly!

[Leo]

No problem 🙂

[Author]

Posts