-
Posts
-
Hi there! I’m having such a strange issue and I’m hoping you can help!
I have a page with multiple columns, and in one of the columns I need 4 images w/ captions displayed side by side. They are the same height but slightly different widths, inserted within an Avia text box. The last 2 images are showing up slightly below the 2 left images. Below is the raw code as it’s in the text box, links to the screenshots & page link in the Private content below:
[caption id="attachment_24647" align="alignleft" width="50"]<img class="wp-image-24647" src="https://laawtest1.wpengine.com/wp-content/uploads/2024/11/19oz-Can.png" alt="19.2oz Can" width="50" height="145" /> 19.2oz Can[/caption] [caption id="attachment_24659" align="alignleft" width="50"]<img class="wp-image-24659" src="https://laawtest1.wpengine.com/wp-content/uploads/2024/11/16oz-Can-1.png" alt="16oz Can" width="50" height="145" /> 16oz Can[/caption] [caption id="attachment_24658" align="alignleft" width="70"]<img class="wp-image-24658" src="https://laawtest1.wpengine.com/wp-content/uploads/2024/11/HalfBarrel-Keg-1.png" alt="Half Barrel Keg" width="70" height="145" /> Half Barrel[/caption] [caption id="attachment_24660" align="alignleft" width="51"]<img class="wp-image-24660" src="https://laawtest1.wpengine.com/wp-content/uploads/2024/11/Sixtel-Keg-1.png" alt="Sixtel Keg" width="51" height="145" /> Sixtel[/caption]When I remove the captions, the images align just fine.
The weird thing is, when I inspect the section it’s showing a line break between the 2nd & 3rd image, where the alignment goes awry. But I don’t see it anywhere else and I can’t figure out why it’s adding that.
Thanks in advance for your help!!
Hey Kelly,
The keg images seems to have a lot of white space on top, could you try removing that to see if it helps?
Best regards,
Rikard@Rikard
If I make the images different heights, they won’t align at the bottom of each image: https://drive.google.com/file/d/10bS4rg7TflgtamOLRp5ZtXWsLFI2JCfZ/view?usp=sharingto better select that text-block section – and to not influence other text-blocks – give that avia-textblock a custom class f.e.: bottomlined
then put this to quick css:
.avia_textblock.bottomlined { display: table; } .avia_textblock.bottomlined > div { min-width: 130px; display: table-cell; float: none; border: none; padding-right: 30px !important; }play a bit with min-width value
or try instead :
.avia_textblock.bottomlined { display: table; } .avia_textblock.bottomlined > div { min-width: 80px; display: table-cell; float: none; border: none; padding-right: 10px !important; }We’re pretty close, thank you!
Here’s my challenge with this – the size of each image needs to be relatable. In other words, the 16 oz can might be a different height as the bigger can, but can be the same width. The two kegs need to be the same height, but different widths. That way when you see them side by side, the stroke/outline of each image isn’t so varied, and the smaller can doesn’t look proportionally different. If that makes sense? Which is why originally I had the images saved at the same height, so that no matter the width one image wouldn’t look like it has bolder lines than the others.
This would be my ideal outcome: https://drive.google.com/file/d/10dIXwgP-n5RsbaMu9o90a2UOv8hcbD7_/view?usp=sharing
The easiest way to do this is if the images are in this ratio ;) – why force something via css that can already be created this way during creation.
That’s where I run into the issue. Even if all the images are the same proportions, they start to stagger.
I would create an external format in my image processing program and then place the images there so that they have the height and width corresponds to the true proportions. Here, unfortunately, we come to the probable fact that such a can will look lost next to the barrel.
see here : i put all images in the same outer image dimensions ( 400 x 600 )
and then inserted the individual images in the image program according to their size. As a result, the png’s all have the same size, but the contents are proportional to each other.download them here: https://webers-testseite.de/Kelly.zip
see – with code on the example page: https://webers-testseite.de/lunar-kitten/
if the place is too narrow the grids will autoflow – if you like to flow only to a 2/2 grid then we had to set a media query.
i set the image background to a color – so you can see that the images got the same outer dimensions.
- You must be logged in to reply to this topic.