how to make text inline with image ?

This topic has 5 replies, 3 voices, and was last updated 3 years, 5 months ago by Ying.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 26, 2022 at 10:51 am #2168230

Brian

Hi,

Is there an easy way to make the text inline with images?
I found the inline image option but it doesn’t make the text inline with the image.
Am i missing something?
Should it be made with CSS?
if it’s the case, in term of GP layout, what’s the best option for the text and the image? container, headline + inline image? or should i use the grid?

Under the image, i also want to display a subtitle (that will be centered to the image).

Please find attached the link of the page.
I want to do this first with the first photo on the right + first paragraph (top of page). Here I built this paragraph with a grid.

and then i’ll make more on the same page.

Thanks for your help!

March 26, 2022 at 11:14 am #2168250

Leo
Staff
Customer Support

Hi Brian,

Using a grid as you already do would be my suggestion here.

Let me know if this helps 🙂

March 26, 2022 at 12:25 pm #2168291

Brian

Hi Leo!

hum I still don’t get it. Now, my containers don’t have the same size but the text is still not under the image. (for the subtile under the image, i know there is the option).

Just to be sure, I want part of the paragraph text to go under the image, and it should be responsive depending on the screen size.
https://share.getcloudapp.com/12ugrd45

Here, the layout is:
Container
Container
Grid
Container
Headline (paragraph)
Container
Image

I read the grid overwiew, the container overview articles and tried many combinations.
Is there an option im missing?

Thanks 🙂

March 26, 2022 at 3:37 pm #2168388
Ying
Staff
Customer Support
Hi Brian,

Are you trying to make a layout like this?
https://www.screencast.com/t/DNMw3PP1

If so, the Gird layout won’t work, you’ll need to add the image before the headline, in the same container.

The structure would be:
```
-Container 
  - Image block
  - Headline (paragraph)
```
Then you can give the image block a custom class, eg. float-image.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Add this CSS to your site:
```
.float-image {
   float: right;
}
```
March 26, 2022 at 5:02 pm #2168417

Brian

That’s exatly what I wanted! Thanks a lot Ying! 🙂

March 26, 2022 at 6:11 pm #2168437

Ying
Staff
Customer Support

You are welcome 🙂
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Resolved] how to make text inline with image ?

Popular Articles

Start building better websites today.