Can't get images to align with Gutenberg editor

I am setting up a new site for a non-profit. The theme I chose uses the new Gutenberg only. I would like an image on the left and description on the right, with another image below that, with the accompanying description to its right. No matter what I do in the editor, I can't move the lower image down and to justify left. I have screen shots of the editor page and what it looks like on the site.

I am setting up a new site for a non-profit. The theme I chose uses the new Gutenberg only. I would like an image on the left and description on the right, with another image below that, with the accompanying description to its right. No matter what I do in the editor, I can't move the lower image down and to justify left. I have screen shots of the editor page and what it looks like on the site.

• images

Share Improve this question asked Jan 28, 2019 at 23:51 CarolCarol 1111 bronze badge 3

• Looks like a float (CSS) problem. – jdm2112 Commented Jan 29, 2019 at 0:10
• What do I do? And how would I explain this to the scared of computers folks who will be taking over the website once I set it up. Doesn't look like this new editor will be "as easy as changing a Word file, " which is what I usually tell people who want to be able to just change the words on their static pages. – Carol Commented Jan 29, 2019 at 1:18
• I just learned to transform the image into a media and text image, this is allowing me to put the content next to the image. But it's very limiting compared to the old editor. – Carol Commented Jan 29, 2019 at 1:35

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

CSS

In Customize -> Additional CSS, add the following code:

.clearflow {
    clear: both;
}
figure.alignleft {
    margin-right: 1rem;
}

Blocks

Insert blocks in the following order:

    Image
    Paragraph
    ...
    Paragraph
    Image
    Paragraph
    ...
    Paragraph

Select Image block, and on its toolbar, select Align left icon. In Advanced -> Additional CSS Class section, add clearflow class.

Repeat this for every Image block.