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!
