Lay Theme Forum

Yes, I have the same problem over here!

@felix_rabe: Thanks for your quick reply. I fixed what I needed, but now there seems to be a bug with the two-column layout. See attachments.

Screenshot backend

Screenshot frontend

If I only use the second column, then there is no problem. See the additional text below (on mobile):

Social media
LinkedIn
Instagram
Pinterest

I don't understand this.

URL website:
https://dev.rickangenent.nl/

I’m trying to set a row image background to 100% width on mobile (excluding the default padding).

Specifically, this is for the white transparent image in the footer of the following website.

https://dev.rickangenent.nl/

The red area is also a square image, but it’s not displaying as a square on mobile either. I’ve tried various solutions using CSS and even JavaScript, but I’m still struggling to get it right. I might be doing something wrong, so any help or guidance would be greatly appreciated.

Thanks in advance!

Why does the custom mouse cursor have a maximum size of 128 * 128 px? Is it possible to adjust this maximum size?

Is there a way to open a lightbox slideshow using a text link?

Ah, okay, thanks. I need it for the page overlay that is activated when the Lightbox is active.

https://ninetkaijser.nl/series/micro/

I’ve set my margin using the following code:

@media (min-width: 601px) {
  body.lightbox-css-on .close-lightbox {
    padding: 48px !important;
  }
}

A hover state that changes to white would be nice.

Just activated the phone layouts for all the pages, so now they have consistent spacing. :)

It would definitely be great if you could save a row and load it back in.

I think in general, so for both?

Ah, of course! I can use a 6-column layout—2/6 for the 3-column setup and 3/6 for the 2-column one. Apologies for not thinking of this earlier, probably just need a bit more sleep. ;)

It would be great if there were more features for the "X" Close Icon. Currently, you can only choose the color or upload a custom "X" Close Icon.

I think it would be nice if you could set a mouseover color or effect as well.

Additionally, it would be great if the "X" Close Icon had the same spacing around it as set by the "Space Around Image" option. This would create a nice frame in your layout.

Is it possible to apply a mouseover effect to the Element Grid Thumbnails?

I noticed that there are settings available for adjusting Project Thumbnails, but it seems like there aren't any options for the Element Grid.

Could you clarify if this is possible?

I have a page with a three-column layout, and I need one specific row to have a two-column layout, where the first column contains a block of text.

The goal is for the text to take up half of the page width while staying within the page margins.

Is it possible to do this with CSS? Any help or guidance would be much appreciated!

Here’s the page I’m working on: https://dev.ninetkaijser.nl/grote-tekeningen/l/

This page has the layout I need, but it uses a four-column setup, making it easier to create a two-column section: https://dev.ninetkaijser.nl/grote-tekeningen/xl/

The general Gridder settings for the page are as follows:

Desktop:

• Column Count: 3
• Column Gutter: 32 px
• Row Gutter: 32 px
• Set Frame: 48 px

Mobile:

• Column Count: 2
• Frame: 16 px
• Column Gutter: 16 px
• Row Gutter: 16 px
• Set Frame: 16 px

Ah, okay, got it. Now I just need to set the styling for each caption across 100+ images in the website/grid.

Is there really no way to adjust this more easily with CSS or something similar?

This keeps it natural while improving flow and clarity.

I've fixed it.

Thanks Armin,

I knew how to set it up, but it seems that the theme uses a solution that is not an 'official' WordPress method. I was wondering why this is the case.

In the screenshots I shared, you can see the black text that is added by WordPress itself.

Hi Armin,

I’m trying to implement the following code to adjust the image aspect ratio in the thumbnail grid:

.type-thumbnailgrid .ph {
    padding-bottom: 50% !important;
}

.type-thumbnailgrid .ph img {
    object-fit: cover;
}

However, this doesn't seem to work at all. Even after adding !important to override styles, it still doesn't apply the intended changes.

I’ve also noticed that many other custom CSS styles I’ve added don’t seem to have any effect, as if Lay Theme’s internal code is always overriding them.

Is this the case? Are there any additional steps needed to make custom CSS work properly in Lay Theme, or is there a particular method to override the theme’s built-in styles?

Any help or suggestions would be greatly appreciated!

https://dev.ninetkaijser.nl/
https://dev.ninetkaijser.nl/series/micro/
https://dev.ninetkaijser.nl/series/kosmos/
https://dev.ninetkaijser.nl/over/ninet-kaijser/

I’m wondering where and how I can adjust the styling of captions for images displayed in an Element Grid.

Additionally, is it possible to use a Text Format to ensure the style adapts properly for mobile as well?

I would like the first text line of my page title to start at the same height on mobile as it does on desktop.

However, on mobile, some page titles (about page and Kosmos-series) have multiple lines, and this seems to unexpectedly adjust the top padding.

How can I prevent or fix this behavior?

Link to website: https://dev.ninetkaijser.nl/