Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 3, 2022 at 10:19 pm #1360549
    mistermagoo8691

    Hi folks. Is there any CSS trick I can use to place 2 images (or more) side by side inside a text box?
    When adding a picture I can choose the alignment for it: well, if I choose “LEFT ALIGN” for the 1st one and “RIGHT ALIGN” for the 2nd, the 2 images are place side by side… but any text I add in the textbox after the image goes between the 2 images….

    Thanks!
    Bye,
    A.-

    August 3, 2022 at 11:27 pm #1360553
    Guenni007

    give a custom-class to your text-block element – f.e.: img-side-by-side
    insert your images via add media – set for both images float left – or center or right – make one return and insert your text.

    .avia_textblock.img-side-by-side p  {
  display: flex;
}

    see details on: https://enfold.webers-webdesign.de/magoo/

    August 4, 2022 at 7:16 am #1360570
    Ismael

    Hi,

    Thank you for the inquiry.


    @mistermagoo8691    : Please check the test page above and follow the recommendations.

    @@Guenni007: Thank you for the info and the test page!

    Best regards,
    Ismael

    August 4, 2022 at 2:41 pm #1360634
    mistermagoo8691

    Thanks @Guenni007 for your help! Actually, I want to do it in an ACCORDION control. I wrote “text box” just to be simple, but I need to use it in an accordion.

    I told myself: fine, it’s enough to change the main class, from .avia_textblock to togglecontainer, and it should work.

    .`togglecontainer.img-side-by-side p {
    display: flex;
    }`

    It is not… where is my mistake?

    EDIT: @Guenni007, I’ve tried to do it on a textbox, just to verify that it is working in my environment as well… and it was not working.
    You know why? Because I had a caption on my images: if there is a caption, the two images are NOT moved side by side. If you remove the caption, it works. Tonight I am going to test again the solution on the Accordion, removing the captions…

    August 4, 2022 at 8:14 pm #1360694
    Guenni007

    yes – it is because if there is a caption – it tries to put each image in a p-tag.
    if you switch to text-mode – you can see it:

    if you change it to:

    these images are besides each other. BUT editing that text-block again – it will again place that return.
    see example page from above: https://enfold.webers-webdesign.de/magoo/

    see comment inside the css rule – a change to a different display is not possible – allthough the selector is more specific and rule is set to important.
    ______
    now to your accordion. Can you show us a page it concerns? but at least one of the Enfold sample pages?

    August 4, 2022 at 8:17 pm #1360697
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    August 4, 2022 at 9:31 pm #1360713
    Guenni007

    BUT
    if there is no floating text around the images – there is no need to do it this way.
    It was much easier than to have a column with the images – or put a image gallery to the layout –
    and then beneath a column with the text.

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