[Support request] Remove margin or padding from a "grid container"

[Henry]

It seems that there are left and right margins added to the GP recommended “Grid Container” setup?

If you see my screenshot you will see what I mean: https://prnt.sc/nsknmu

This is the code that I am referring to. How do I keep the grid container flush and hugging the sides of the parent container?

Thanks!

      <div class="grid-container">

        <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
          <div class="alert-coupon">
            This is an alert box.
          </div>
        </div>

        <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
          <div class="alert-sponsor">
            This is an alert box.
          </div>
        </div>

      </div>

[Leo]

Hi there,

You will need to give that <div> a second class like alert-box so you can target it with CSS:

.grid-container.alert-box {
    padding: 0;
}

The site you linked also doesn’t match the screenshot you’ve shown by the way.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry]

Thanks Leo! Hmm, there is still padding though….

<div class="grid-container alert-boxes">

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <div class="alert-coupon">
      <a href="">This is an alert box.</a>
    </div>
  </div>

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <div class="alert-sponsor">
      This is an alert box.
    </div>
  </div>

And here is the CSS:

.grid-container.alert-boxes {
    padding: 0;
}

(I changed .alert-box to .alert-boxes (plural) just b/c there is another reference to that name in the CSS).

Here is the actual URL: https://testinfosec.wpengine.com/events-in-2019/cyber-security-cloud-expo/

Maybe the parent container div also needs to have its’ padding removed or made to zero?

Thanks Leo.

[Leo]

You can always use browser inspect to see where the padding is coming from:
https://www.screencast.com/t/Ov2LEqOT

Good skill to learn for web developing 🙂

So in this case, this CSS should work:

.alert-boxes .grid-50 {
    padding: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry]

Thanks Leo – worked great

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts