-
AuthorPosts
-
November 19, 2024 at 10:11 pm #1471707
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!!
November 20, 2024 at 11:49 am #1471734Hey 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,
RikardNovember 20, 2024 at 2:41 pm #1471750can i see the page?
November 20, 2024 at 10:11 pm #1471795November 20, 2024 at 10:19 pm #1471798@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=sharingNovember 20, 2024 at 10:22 pm #1471799to 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
November 20, 2024 at 10:33 pm #1471800or 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; }
November 20, 2024 at 10:39 pm #1471801We’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
November 20, 2024 at 11:14 pm #1471802The 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.
November 21, 2024 at 1:02 am #1471807That’s where I run into the issue. Even if all the images are the same proportions, they start to stagger.
November 21, 2024 at 9:13 am #1471811I 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.- This reply was modified 1 month ago by Guenni007.
November 21, 2024 at 1:03 pm #1471838 -
AuthorPosts
- You must be logged in to reply to this topic.