-
Posts
-
If you’ll goto the page in the private box, you’ll see what I came up with by using an Image element in a 1/3 layout element, and a text box in a 2/3 layout element. I tweaked borders/margins to get them to look stitched together, but if you’ll move the side of your browser in, you’ll see that the image and box resize differently. I’m ok with the image moving on top of or below the text as it gets to mobile size, but I’d like them to resize together until it gets to that mobile size if possible.
Is there an element that does this that I have just missed? If not, is it possible to get the image and text box to change equally until mobile size where they go vertical? (It does do this for a bit, then you’ll see image be smaller than the green text box)
Thx!
Jonsomething like this: https://kriesi.at/support/topic/text-around-an-image/
Not exactly . . . I need the text to say in it’s box entirely, and the pic to remain completely to the right (or left) of the text. The link I put in the private box is this: https://gatehealing.com/counseling-austin-tx/personal-development-counseling/
Look at the rock climbing image and the green box to the right of it. I tried using just a text box with an image inside of it with the text wrap option where the image is to the edge. But the text starts wrapping as it gets to a certain size, and the spacing just looks weird.
Hi,
Thank you for the update.
Have you tried setting the image as the background for the second column instead of using an Image element? For mobile view or at the full-width breakpoint, you can apply a minimum height to the column to make sure it still displays appropriately above or below the text box.
Best regards,
Ismaelok – now i understand – but: a basic principle of a column layout is that the column that has the most content determines the height. Otherwise you would have an overhang.
This is the reason for a background image. It then adapts to the growing content when “cover” is selected, but the content of the image is then also cropped.
If the content of the column with the text is not the determining element of the height, then it could be set by calculation so that the background image determines the height.
see here ( a bit different to your request ) how to calculate the setting: https://webers-testseite.de/isp/
pull the screen width to narrower width and see – that as long the content of the text cell is less – the background image resizes with the rest responsively.
your image has an aspect ratio of 5/4 = 1.25
the column on the left is 3 units wide – and the column on the right 2 units – so the height must be 2*1.25 = 2.5
above your 1310px ( keep the padding left/right of 50px in mind ) etc. …see with css on : https://webers-testseite.de/gatehealing/
you see that below approx. 1000px, the height of the text determines the overall height – and the background-image on the right is cropped then.
Thanks @Guenni007
That’s definitely the behavior I’m looking for . . . I get the math, but getting the concepts applied in my head will take a minute. . . On the re-done image of my site you did, the image itself is enormous with the browser window being wider . .. .I’d like it to have a max size of # x # . . .
I can sort of follow the code at the bottom, but am not sure how to get that into the Enfold elements.
The point is that the image should have a width of 2/5 due to your column setting – so that the image is now displayed as a whole, the height must inevitably correspond to the aspect ratio. Since the height of the image is 1.25 times the width – and the width of the image is 2/5 of the total width – the color section must then be 1/2 as high as it is wide. In other words, 0.5 times.
With your setting of 1310px (min-width content; I have 1510px there on the example page), the height is therefore predefined for screen widths greater than this width.
However, the shrinking of the content starts earlier due to the standard padding of Enfold (left and right 50px each).
The content itself only has the total width minus these 100px.If you do not change the aspect ratio of your image, or the relationship between the columns, then this fundamental principle remains the same.
So if you want the image to be smaller, you must switch to 3/4 1/4, for example – or select a different image section.you now can see different demos under that example page with 2/3 – 1/3 columns and 3/4 – 1/4 columns.
1/3 x 1.25 = 0.416This construction only works – if the text block needs less space than the image block !
@Ismael
Tried setting pic as background in column . . . tough to get the text to not overlap into it.Looks like on the flipbox examples that once you shrink to a certain point, you get the same issue as me (pic shrinking out of line with text).
I may just leave it as is at 2/5 , 3/5 and not worry about the pic shrinking a little. I’ll keep working though to see if I can get it dialed in.
Thanks!
JonHi Jon,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardHi,
Thanks for letting us know, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘How to create a text box next to an image where both resize together’ is closed to new replies.