[Resolved] Spacing issue with Lightweight Grid Columns

Home Forums Support Spacing issue with Lightweight Grid Columns

  • This topic has 16 replies, 2 voices, and was last updated 7 months ago by David.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1220348
    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.

    #1220566
    David
    Staff
    Customer Support

    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 ?

    #1220636
    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.

    #1220638
    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.

    #1220701
    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.

    #1220716
    David
    Staff
    Customer Support

    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.

    #1220720
    Davood

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

    #1220735
    David
    Staff
    Customer Support

    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…

    #1220738
    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.

    #1220740
    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.

    #1220779
    David
    Staff
    Customer Support

    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%;

    #1220950
    Davood

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

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

    #1220965
    David
    Staff
    Customer Support

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

    #1220972
    Davood

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

    #1220983
    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?

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.