[Resolved] how to make text inline with image ?

[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!

[Leo]

Hi Brian,

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

Let me know if this helps 🙂

[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 🙂

[Ying]

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;
}

[Brian]

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

[Ying]

You are welcome 🙂

[Author]

Posts