margin-right and margin-left break out of entry-content

  • Trying to use the grid but it currently breaks out of the entry-content div – spilling out by 15px each side.

    The css that looks to be doing this is:
    ghostkit-grid-gap-md {
    margin-right: -15px;
    margin-left: -15px;
    }

    Turning those off means that the margins in the css below it get activated:
    .ghostkit-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    }

    Can I turn those margins off without it effecting anything? I can’t see why they are there if you are using css grid.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Nikita

    (@nko)

    Hi.

    The grid based on Bootstrap Grid, that uses Flexboxes, not the CSS Grid. Each column has horizontal padding for controlling the space between them (Gap). This padding is then counteracted on the Grid block with negative margins. This way, all the content in your columns is visually aligned down the left side.

    Regards, nK.

    Thread Starter fatherb

    (@fatherb)

    Thanks for the reply. Not sure I understand though.

    Try it yourself. Put a background on a grid block and you’ll see that it overlaps the content area on the left and right sides by 15px. This can’t be intended.

    Plugin Author Nikita

    (@nko)

    This is how works Bootstrap grid. You have 2 options:

    – disable Gap for columns
    – use AWB plugin for backgrounds, grid negative margins will not affect it. https://www.ads-software.com/plugins/advanced-backgrounds/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘margin-right and margin-left break out of entry-content’ is closed to new replies.