Archived topic
floating images: margin to text
5 replies · Started by Stefanie on February 12, 2023
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!
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 :)
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?
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.
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 🙂
You're welcome, Stefanie! :)