Site logo

[Resolved] floating images: margin to text

Home Forums Support [Resolved] floating images: margin to text

Home Forums Support floating images: margin to text

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2530308
    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!

    #2530722
    Leo
    Staff
    Customer Support

    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 🙂

    #2531008
    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?

    #2531033
    Fernando
    Customer Support

    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.

    #2531047
    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 🙂

    #2531050
    Fernando
    Customer Support

    You’re welcome, Stefanie! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.