[Resolved] css grid

[Kerry]

I have used a CSS grid (using lightweight grid columns plugin) inside a section to display three images for the hero location. The issue I have is that there seems to be some kind of padding around the images that I can’t get rid of. Glad of any suggestion.

[lgc_column grid=”66″ tablet_grid=”50″ mobile_grid=”100″ last=”false”][/lgc_column]
[lgc_column grid=”33″ tablet_grid=”50″ mobile_grid=”100″ last=”true”]<img src=”/image.jpg[/lgc_column]

[Leo]

Hi there,

Where is that code added on the actual site?

Also I see you are using Thrive for the home page. Doesn’t the page builder has columns option? It should be better than LGC.

Let me know 🙂

[Kerry]

I was trying two different methods, one using Thrive and one using LGC, both produce errors in a different place 😀
I have disabled Thrive now so you can see what I mean. The hero section has spaces around the images.

[Leo]

So looks like the top and bottom 4px padding is set in that specific section:
https://docs.generatepress.com/article/sections-overview/#opening-the-section-settings

And then looks like you are using Full width for the inner container for the first section but contained in the second which is causing the misalignment.

Let me know if this helps 🙂

[Kerry]

The top and bottom padding are intentional, it is the unknown spaces between the images that I would like to specify the margin width to be 4px and on the far right and left that I would like to eliminate it completely. I have tried all combinations of setting the inner and outer box type but it doesn’t seem to make a difference.

[Kerry]

OK, i think I got it.
.lgc-column {
padding: 0px;
height: 500px;
}
.inside-grid-column {
padding: 0px;
}
.lgc-last {
padding-left: 7px;
}

[Leo]

Awesome!

Let me know if you need another look 🙂

[Author]

Posts