[Resolved] Spacing issue with Lightweight Grid Columns

[Davood]

We are in the process of setting up a 2×5 grid using Lightweight grid columns that will use background images. The problem we are having is that we need 12px of space between each row but no matter what we do there is way more than that or the rows are overlapping. Right now while figuring out how to do the spacing we have only two rows setup. We need the 12px between each row to be responsive friendly. Thanks in advance for your help.

[David]

Hi there,

may i ask why you would need to use LGC inside of an Elementor section ? Seems counter intuitive to use a Columns plugin inside a page builder that provides columns … what am i missing ?

[Davood]

There are a few reasons we are doing this with custom html/css using LGC. The biggest being that images do not scale correctly on all screen sizes when we use elementors flip box element. Trust me this is not counter intuitive. We are working with a very picky client and for this page we need to use LGC.

Thanks in advance for helping me find a solution to my original question.

[Davood]

I’ll add that we tried to do it in Elementor without The flipbox element and images still did not scale correctly on all screen sizes.

[Davood]

I just tried again in elementor again over here: https://jaffeai.binaryweb.work/see-try/

Now the images are scaling correctly however, we still need the white space between the images to be a 12px border and that is not the case, even in elementor.

I am happy to use either method, LGC that I linked to in my original post or this new trail page that I’ve created.

Looking forward to your reply.

[David]

Lets go with the Elementor method as LGC just introduces more code and complications.
The issue you’re having is related to the CSS you have for each of your images eg.

.harborcountry {
    background-image: url(https://image...);
    height: 100vh;
    max-height: 820px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

instead of using height and max-height use padding to control the height.

.harborcountry {
    background-image: url(https://image...);
    padding-top: 66%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

66% is the aspect ratio of your original image.

[Davood]

okay, thanks for that. The spacing around the images is still not a uniform 12px border though. How do I fix that?

[David]

Elementor is responsible for vertical and horizontal spacing.
Edit the Elementor Section and set the Column Gap to No Gap. This will remove the default 10px it adds.

Then you can set the Section Padding and Column Margin to create the spacing you need…

[Davood]

I saw that in the documentation but I can not find that setting in elementor. Also, we are adding a new elementor row for each row of the grid. and it is impossible to get to the section settings for the top section.

[Davood]

Ah, I found it. However, the space in between two pictures in the same row is still not matching the space on all other sides when I do what you suggested.

[David]

Its because the image isn’t quite filling the container width.
In the CSS i provided the padding-top: 66%; needs tweaking try padding-top: 66.6669%;

[Davood]

Nope, now the space in the middle of the two pictures is completely gone…

Again, we want a 12px border around each picture.

[David]

Yep – that was to remove the spacing that belonged to the background.
You can add the spacing in the Elementor controls by adding margins to the columns or the widgets….

[Davood]

That did not seem to be working correctly either. I will try it again though!

[Davood]

Okay so I just did as you suggested and the pictures in the right column are slightly bigger than the ones in the left column. How do I fix this without losing the 12px border on the right side of the page?

[Author]

Posts