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

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

Home Forums Support Remove margin or padding from a "grid container"

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #909182
    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>
    #909192
    Leo
    Staff
    Customer Support

    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.

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

    #909268
    Leo
    Staff
    Customer Support

    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;
    }
    #910118
    Henry

    Thanks Leo – worked great

    #910130
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

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