dear support,
i just can’t figure out why the left picture seems to have some space above and below. i tried a lot! and so i hope for your insight on that one…
the hight of the left picture changes with the size of the gap. maybe thats a hint?
both pictures have the same absolute height in pixel.
please see secure note.
thanks so much! kai
Hey @iTurtle,
Thanks for reaching out!
Yes, you are right! I check the height of both pictures and they have the same height but the first picture on the left, just rendered 549px height while the bigger picture is 562px. The issue has something to do with the size of the gap. The first picture was vertically centered that’s why you are seeing a white space from above and bottom part of the image.
You could try adding a padding left in the bigger image cell to match the height of your first image.
Hope that helps.
hey @marc_a,
wow that was fast! thanks!
funny thing: i keept adding padding to the right to the left image zu solve the problem…
your solution works of course but needs some more tweeking for smaller displays.
is it a bug?
best wishes, kai
Hello Kai,
No, it is not a bug. It is just how the Grid and Flexbox works. It will automatically add some spaces to the cells if you have positioned the contents of the Cell to the center where it does not cover the width or height. For more understanding about the Grid, kindly check this out:
Hope this helps.
dear @ruenel,
thanks for clarifying and the video!
but even if i not center the image vertically and use “start” or “end” values the gap is double as big (of course ;)) but still there.
so i wonder what the trick is to have 2 pictures align perfectly (meaning having the same height)
and even if i remove alle the gaps from the grid the pictures have different height.
thanks again and best wishes, kai
Hey @iTurtle,
If you wish that the two images will have the same height no matter the gap. You need to add the images as a background in the cell. In that way, no matter what the gap is, the images will have the same height.
Hope that helps.
hi @marc_a
thanks for the tipp!
i did what you suggested but struggle giving the images the correct size (height).
i used “cover” and “center” for the background image of the cell. lower layer.
size and width 100%. first it worked. but now it does not anymore. the images are only maybe 100px high…
maybe a 1px transparent image as the “real” image in an image element above? that sounds so outdated 
would this techniq affect seo in any way?
thanks again and best wishes, kai
Hello @iTurtle,
The SEO crawlers may ignore the images because it was used as a background image. To make sure that there will be enough image height, you can set up a minimum height in each of your cells.
If you are still having some trouble, please provide us the URL of the page where we can inspect your Grid.
Thanks.
dear @ruenel,
thanks for your reply.
fixed heights like this don’t play well with different viewports. and seo is of course essential…
i am now a little taken aback and wonder why it is not easily possible (or even standard) to give 2 pictures in a grid-row the same height.
there must be a solution for this. no?
an extra grid with only two pictures side by side maybe???
btw. the video mentioned above did not help me understand that specific problem at all. it was a interesting history lesson, though
thanks again and all the best, kai
Hey Kai,
I tried to replicate your setup on my development website and the images have the same heights.
Would you mind sharing your credentials so that we can check your setup properly? To do that, please give us the following information in a Secure Note.
- WordPress Login URL
- Admin level username and password
You can find the Secure Note button at the bottom of your posts.
Thank you.
thank you so much for replicating the setup! i use several grids on the same page. only this one should have 2 pictures of the same height. pls see secure note. thanks a million! kai
Hello Kai,
In your Image element, use the “Top 50%” as your position so that the image will always display the correct and not cropped image.
You can also play around with the “Obect Fit” properly. I would advise that you refrain from using “Cover” or “Contain” because this will zoom in/out your image.
Best Regards.
hi @ruenel
nothing seems to work in my case. it tried your tipps.
also i am not sure if you refer to the normal picture solution or the background picture solution. both ore on my site.
the background solution does not help - since seo is not working with that one.
could you also please let me know the possible values for the position field? they seem to be different from the standard ones https://www.w3schools.com/css/css_positioning.asp and there is no dropdown for those. couldn’t finde the information in the manual either.
it seems that you also did not find a solution since nothing changed on the site and you advise to “play around” the the values.
since working with pictures in a grid is a very common case i would be really interested in the reason for why the grid as it is. why is there not a simple solution for this? maybe some presets? btw. i used a preconfigured layout from the provided ones which i bought.
thanks again for your time and help with this! best wishes, kai
hi marc,
you said you could not replicate my problem.
may i as what you did?
maybe the text below my pictures is the reason??
did you use a grid with 2 picts only?
thanks a lot! i am desperate by now… kai
Hello Kai,
Please check out my demo with only using DIV elements.
Column 1 element has Flexbox enabled with no wrap. The direction is “Column” by the way so that both the DIV elements will be displayed inline.
There is no gap though. You may need to add left and right margins to the images.
Hope this helps.
dear @ruenel,
now you suggest i don’t use grid???
i spend a lot of time learning grid and like it a lot the more i know. so i really would like to use it.
@marc_a you mentioned that you rebuild my grid and had no problems with the pictures. could you please help here?
thanks a lot and best wishes, kai
Hello Kai,
You can use the Grid. You cannot control the image height though which means that there is always some space below or above the image when you insert it inside the cell. That is because the height of the image is relative to the width. The height automatically adjusts if the width changes. My example is the best way to achieve that both of the images will have the same height.
I will forward this thread to @Marc_a.
Best Regards.
dear @ruenel
thanks a lot for explaining. i can understand that. but i don’t understand why grid has not solution for this!
thanks a million for forwarding the thread to @marc_a !!!
best wishes, kai
hi,
what i do in such cases : i dont use the image element inside the grid, i set a background image in the cell. so there is no gap.
but this does need some rework of your grid i think.
cheers
thanks @deranaloge!
but… this has been suggested before in this thread and has 2 major disadvantages:
the image then has to be given a fixed height to display correctly and that is not very respsonsive…
and for seo its a bad technique.
it need both, though…
@marc_a any further ideas before i start changing the image aspect ratio of the image files?
thanks again for your help! best wishes, kai