[Resolved] floating images: margin to text

[Stefanie]

Hi there,

on my pages I very often use images that are surrounded by text (float-left or float-right).

In the theme I used so far, if you set an image to float, it was automatically assigned to a corresponding class, like this

<figure class = alignleft >
<figure class = alignright >

So it was easy to write a corresponding css rule to define the distance of the image to the surrounding text.

But for the GB-images, unfortunately, I can’t find such a class. When I inspect the image, I only find something like:

.gb-block-image-a218872a {
  float: left;
}

Does this mean that I have to adjust the margins for each image again and again?
Or can I also do this for all (float) images via a css rule?

I’m using GBs free version.

Thank you!

[Leo]

Hi there,

If you are already using GenerateBlocks then I would recommend using a Grid block to create the media-text layout you are after:
https://docs.generateblocks.com/article/grid-overview/

Then you can use the various block settings to achieve the exact layout you are looking for.

The CSS solution with float is definitely an outdated solution.

Let me know 🙂

[Stefanie]

Hi Leo,

thank you for your answer, but I think this is a misunderstanding.

The CSS solution is only about the margin information (how much distance has the image to the surrounding text).

So far I have built a page with many images very quickly: Images and texts placed below each other, then the images set to float-left or float-right. By the margin, which was defined via CSS, the images have then automatically received the correct distance to the text.

Such a page would not be possible with grid (or if so, it would take a lot of time to format it that way):
https://prnt.sc/OTV-fQzT_WEY

Would there be a shorter workaround?

[Fernando]

Hi Stefanie,

In GB Pro, there’s such a thing as Global Styles. See: https://docs.generateblocks.com/article/global-styles

Custom CSS-wise, you can add a Custom Class to your Blocks and use this as a selector for your custom CSS.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

This would be the workaround.

[Stefanie]

Hi Fernando,

thanks for your feedback. The whole thing with the unique IDs is really new to me, but I’m starting to understand it 🙂

[Fernando]

You’re welcome, Stefanie! 🙂

[Author]

Posts