[Support request] Images overlapping in Lightweight Grid Columns

[Afa]

Hi, I’m working off of the Catalyst template in the site library.
It’s using the LGC plugin.

I’m having an issue, if you scroll all the way down you’ll see that the images are overlapping with the content from the next section. They’re actually also overlapping with the <hr> in the same section that should be right below them.

I can’t seem to figure this out after searching the forum for a bit, would appreciate your help.

Thanks

[David]

Hi there,

try adding this CSS:

.lgc-column {
    height: auto !important;
}

[Afa]

Hi David, that worked! Thanks for your help.

I’m a bit new to CSS. But, if I wanted to understand how you got that fix and how it works, where could I look?

[David]

It comes from endless hours of writing HTML and CSS. Then using the Browser Developer Tools ( Right Click > Inspect ) to have a look at the issue. In this case it was the Same Height Grid columns getting a little confused by the height of the content. So its a bit of a hack really.

[Author]

Posts