stuck with simple pictures alignment within an element grid with custom row height
-
Hey there,
I am stuck with the alignment of some pictures inside an element grid which is within a row, I gave a custom row height of
70vh
.I want the pictures to be aligned like this:
Which is achieved with custom HTML input inside the gridder...
<div class="erinnerungsContainer"> <img id="erinnerungsPic1" src="https://luiskueffner.com/wp-content/uploads/2024/09/erinnerungsservice1.jpeg"> <img id="erinnerungsPic2" src="https://luiskueffner.com/wp-content/uploads/2024/09/erinnerungsservice2.jpeg"> </div>
... and this corresponding CSS:
.erinnerungsContainer { display: flex; justify-content: center; height: 70vh; align-items: center; overflow: hidden; gap: 20px; } .erinnerungsContainer img { height: 100%; width: auto; object-fit: contain; }
... so the corresponding gridder looks like this:
But currently it looks like this...
...where the corresponding gridder without custom HTML input but the two pictures inside an element grid looks like the follwing screenshot. I assigend the third row a custom row height of
70vh
. If needed, I also provided the custom class names, which are currently without any custom CSS.
I would be very thankful if someone could advise me on how to achieve my desired alignment by using Laytheme elements like the existing element grid or even the simple placement of single pictures (in combination with custom CSS if needed)...
Thank you all in advance!
-
Hello! You seem very code-savvy, but I wonder if you are over-complicating this (or I misundertood it).
Looking at the screenshots, the design is not working as you wish becuase of a ratio problem. Those images are too tall to fit, and laytheme does not ´crop´them.
I would start by simply reducing their width (=less columns) so each takes about a 1/4 of the screen – as in your original.
-
@marcos Yeah, it really seems like that lol
Sure, it is about ratio – the issue with that is, when I reduce the width by keeping the original ratio, I am unable to place it exactly between the menu bars as in my first screenshot.
Your suggestion does look like this:
So it is always missing the ideal spot. It also needs to be responsively aligned in the horizontal middle on all desktop/table screen sizes.
I'm sure I'm just missing a super simple thing...
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it