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.
Share Improve this question asked Jan 28, 2019 at 23:51 CarolCarol 111 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
1 Answer
Reset to default 0CSS
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.