Lay Theme Forum

@arminunruh I tried to add my code piece by piece and as far as I could see, it is always about the height value of

.elements-collection-region.same-height img {
    height: 70vh !important;
    width: auto !important;
}

in combination with the padding-bottom you posted in the screenshot. This padding is added via right-clicking the element grid and giving it a 5% value for "Space Below". I removed those 5% and tried the calculation you suggested. Since it is 2 times the menu bar, this is:

height: calc(100vh - (2 * (var(--menu-top-padding) + var(--menu-font-size) + var(--menu-bottom-padding) + var(--line-strokewidth)))) !important;

I also tried:

height: calc(100vh - 328px) !important;

Unfortunately, both didn't help. (The padding-bottom property of the .type-element was also not the right choice... )

I would be truly thankful if you could still try to help me with this problem. Your support is very much appreciated...

All the best

@arminunruh

I did use your code for sure! But still got this fitting problem...

The top statement is actually

.row3impressions {
    padding-top: calc(var(--row-top-padding) * 2);
    padding-bottom: calc(var(--row-bottom-padding) * 2);
    position: sticky;
    top: calc(2 * (var(--menu-top-padding) + var(--menu-font-size) + var(--menu-bottom-padding) + var(--line-strokewidth)));
    width: 100%;
    z-index: 0;
}

while my global variables are as follows:

:root {
    --menu-top-padding: 0.29vw;
    --menu-bottom-padding: 0.29vw;
    --menu-font-size: 2.63vw;
    --row-top-padding: 0.6vh;
    --row-bottom-padding: 0.6vh;
    --line-strokewidth: 3px;
}

I write it like this because the sum of the top values are equal to the two menu bars I placed there (namely (Erinnerungsservice) and (impressions). With this, it is way easier to tweak the parameters which are on multiple project sites.

Also, sorry for not posting a link, should have done that before. Here it is! Pw is laytheme

Thank you for your help, appreciate it!

Is there a way to make the background blurry when a picture is displayed within a lightbox?

I tried to achieve this without success by clearing the background color under Lay Options > Lightbox Addon > Style and writing:

.lightbox-bg {
    background-color: transparent !important;
    filter: blur(20px);
}

What could I be missing?

Thank you as always!!

@arminunruh Thank you – looking forward!

I tried around but this did not seem to work. I could only display text but not the embedding itself...

@arminunruh Thank you, that worked well!

The only problem left is, that the top and bottom padding between the images seems to behave different on different screen sizes:

On this screen size, the bottom padding is equal to the top one.

But here, the bottom padding is smaller than the one on the top.

I got some custom top and bottom padding for the row itself with:

.row3impressions {
    padding-top: calc(0.6vh * 2);
    padding-bottom: calc(0.6vh * 2);
    position: sticky;
    top: calc(2 * (0.29vw + 2.63vw + 0.29vw + 3px));
    width: 100%;
    z-index: 0;
}

The (description) and (contact) menu are both sticky with a bottom property.

Any guess how I could approach this?

Thanks and all best

@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...

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!

Hey there,

I would love to add a SoundCloud embedding into my element grid which I've done before with custom HTML inside the gridder. But since there is no option for that inside of element grids, I propose this as a feature.

Or is there any possible workaround for that?

Thanks and have a nice day!

Did not work either :-(
No pictures are shown at all.
I also tried it with a new blank page and removed the swarmContainer class.

I did exact this but unfortunately it did not work... What could be missing?

I could not manage to align normal image inserts the way I wanted with custom ids and css, so I tried to insert the images with pure html and it worked...

Hi,
how can I trigger the Lightbox plugin to present images, that were inserted manually in the gridder with custom HTML? Here is the corresponding webpage.

<div class="swarmContainer">
    <img id="swarmPic1" src="link/to/image1.jpg">
    <img id="swarmPic2" src="link/to/image2.jpg">
</div>

Thank you very much and have a nice weekend!

Because I run into trouble with vertical scroll on this page...

... and it gives possibility for interaction when autoplay is not desired.

Do you think a custom solution with JavaScript etc. would be possible?

Hi community,

is it possible to only set horizontal scroll for a carousel with multiple elements, while preventing vertical scrolling?

I assigned my carousel a projectMediaCarousel class and tried this unsuccessfully:

.projectMediaCarousel {
    overflow-x: auto;
    overflow-y: hidden;
}

Thank you very much!

Thanks!

This code worked for me:

/* delaying the the appearance of project thumbnail mouse hover images */
.thumb.has-mouseover-img img {
    transition: opacity 1.0s ease;
}

.thumb.has-mouseover-img img.mo_thumb {
    opacity: 0;
    transition: opacity 1.0s ease 0.2s;
}

.thumb.has-mouseover-img:hover img:first-child {
    opacity: 0;
}

.thumb.has-mouseover-img:hover img.mo_thumb {
    opacity: 1;
}

@arminunruh Did work like this – thanks!

Hi,

is possible to delay the appearance of project thumbnail images when hovering them?
Is there a special CCS selector for this?

Many thanks!

Having the same issue with the second (contact) menu in this onepager while the first one called (works) does the job correctly.

One click only jumps a bit down, so one would have to click multiple times to get to the correct position.

Things I tried unsuccessfully:

• searching the forum
• updating Lay Theme
• disabling Never change scrolling position when navigating
• disabling overlay option for pages

Many thanks!

What about the ability to place a stack inside of another stack?

Thanks and happy Wednesday!

Is every project assigned to the desired category via Projects > Quick Edit?

Is there a way to create custom easing functions for carousels?

When looking up the source code of a page where I used a custom easing function for expandable/collapsible rows, I saw that the custom easing function appears as a data-animationtiming HTML attribute.

I tried to give the carousel a specific class and added the following line of code into the custom <head> HTML, but without any effect. From here, I don't know how to proceed...

<div class="carouselClass1" data-animationtiming="cubic-bezier(0.95, 0.05, 0.8, 0.04)"></div>

Thank you for your help and efforts!