Home Forums Support css grid

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #713000
    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]

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #713259
    Leo
    Staff
    Customer Support

    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 πŸ™‚

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

    #713301
    Leo
    Staff
    Customer Support

    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 πŸ™‚

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

    #713333
    Kerry

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

    #713377
    Leo
    Staff
    Customer Support

    Awesome!

    Let me know if you need another look πŸ™‚

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