![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
August 3, 2022 at 10:19 pm #1360549
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 #1360553give 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 #1360570Hi,
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,
IsmaelAugust 4, 2022 at 2:41 pm #1360634Thanks @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…-
This reply was modified 2 years, 1 month ago by
mistermagoo8691.
August 4, 2022 at 8:14 pm #1360694yes – 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 #1360697August 4, 2022 at 9:31 pm #1360713BUT
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. -
This reply was modified 2 years, 1 month ago by
-
AuthorPosts
- You must be logged in to reply to this topic.