.elementor-13456 .elementor-element.elementor-element-a63b756{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13456 .elementor-element.elementor-element-a63b756:not(.elementor-motion-effects-element-type-background), .elementor-13456 .elementor-element.elementor-element-a63b756 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DBE1FB;}.elementor-13456 .elementor-element.elementor-element-6bfd1dd.elementor-element{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-13456 .elementor-element.elementor-element-09d16fa{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;text-align:center;}.elementor-13456 .elementor-element.elementor-element-09d16fa .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-size:48px;font-weight:400;line-height:55px;color:#000000;}.elementor-13456 .elementor-element.elementor-element-d3805a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:80px;--margin-bottom:120px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-13456 .elementor-element.elementor-element-d3cfa0d{--grid-columns:4;--grid-column-gap:10px;}.elementor-13456 .elementor-element.elementor-element-d3cfa0d .elementor-loop-container{grid-auto-rows:1fr;}.elementor-13456 .elementor-element.elementor-element-d3cfa0d .e-loop-item > .elementor-section, .elementor-13456 .elementor-element.elementor-element-d3cfa0d .e-loop-item > .elementor-section > .elementor-container, .elementor-13456 .elementor-element.elementor-element-d3cfa0d .e-loop-item > .e-con, .elementor-13456 .elementor-element.elementor-element-d3cfa0d .e-loop-item .elementor-section-wrap > .e-con{height:100%;}@media(max-width:1025px){.elementor-13456 .elementor-element.elementor-element-a63b756{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-13456 .elementor-element.elementor-element-09d16fa{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;}.elementor-13456 .elementor-element.elementor-element-09d16fa .elementor-heading-title{font-size:32px;line-height:38px;}.elementor-13456 .elementor-element.elementor-element-d3805a1{--margin-top:80px;--margin-bottom:120px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:56px;--padding-right:56px;}.elementor-13456 .elementor-element.elementor-element-d3cfa0d{--grid-columns:3;}}@media(max-width:767px){.elementor-13456 .elementor-element.elementor-element-a63b756{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-13456 .elementor-element.elementor-element-09d16fa{margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;}.elementor-13456 .elementor-element.elementor-element-09d16fa .elementor-heading-title{font-size:32px;line-height:38px;}.elementor-13456 .elementor-element.elementor-element-d3805a1{--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-13456 .elementor-element.elementor-element-d3cfa0d{--grid-columns:2;}}/* Start custom CSS for shortcode, class: .elementor-element-6bfd1dd */.elementor-13456 .elementor-element.elementor-element-6bfd1dd .fbc-items li a, .elementor-13456 .elementor-element.elementor-element-6bfd1dd .fbc-items li.current-item, .elementor-13456 .elementor-element.elementor-element-6bfd1dd .fbc-items li span { color: black !important; text-decoration: none !important; transition: all 0.25s ease-in-out !important; } .elementor-13456 .elementor-element.elementor-element-6bfd1dd .fbc-items li .fbc-separator, .elementor-13456 .elementor-element.elementor-element-6bfd1dd .fbc-items li span.separator { color: black!important; opacity: 0.6 !important; }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-d3cfa0d *//* ========================================================================== glstaging.gedlawyers.com/teams -- card white-space fix (FINAL) REPLACES teams-gap-fix.css v1 and v2. Delete both of those first. Measured in real Chromium at 1440px / 900px / 390px against a reproduction built from your actual post-13456.css and post-13463.css. MEASURED BEFORE: desktop rowGap=30px colGap=10px vertical gaps [-30,-30,-30] photo clipped 60px grid overflows 102px tablet rowGap=30px colGap=10px vertical gaps [30,30,30,30,30] grid overflows 29px mobile rowGap=30px colGap=10px vertical gaps [30,30,30,30,30,30,30] grid overflows 40px MEASURED AFTER (this file): desktop / tablet / mobile rowGap=10px colGap=10px all vertical gaps 10px no photo clipping, no grid overflow, no page h-scroll THE EXACT CAUSE --------------- Elementor only ever emitted --grid-column-gap:10px for the Loop Grid. --grid-row-gap is NEVER set, at any breakpoint, so it falls back to Elementor's built-in default of 30px. Your rows are therefore 3x further apart than your columns -- at all three breakpoints. That is the whole white-space problem. It is NOT variable card heights. Every card measures exactly the same height (420px desktop / 320px tablet / 297px mobile) and there is 0px of white space inside any card. My earlier flex-grow / equal-height theory was wrong. WHY DESKTOP LOOKED FIXED BUT TABLET + MOBILE DID NOT ---------------------------------------------------- Because of --margin-top:-60px on the card container. That rule exists ONLY at desktop -- both media queries reset it to 0px: @media(max-width:1024px){ ... --margin-top:0px ... } @media(max-width:767px) { ... --margin-top:0px ... } So desktop was being masked by a negative margin while tablet and mobile still showed the true 30px gap. That band-aid is also harmful: it drags each card 60px above its own grid cell, so combined with the overflow:hidden from the hover CSS it CLIPS 60px off the top of every photo and makes rows overlap by 30px. SECOND REAL BUG FOUND --------------------- The photo is hardcoded to width:303px (210px on mobile). In a repeat(N, 1fr) grid a fixed-width item raises the column's minimum, so the grid grows wider than its 1140px container: desktop 4x303+3x10 = 1242px -> overflows 102px (right-hand card cut off) tablet overflows 29px | mobile overflows 40px -> sideways page scroll This is why the last card looked cut off at the right edge. WHERE TO PASTE -------------- Elementor > Site Settings > Custom CSS, or Appearance > Customize > Additional CSS. Then PURGE THE NITROPACK CACHE. ========================================================================== */ /* 1. THE FIX. One rule, no media queries needed -- Elementor never sets --grid-row-gap at any breakpoint, so this corrects all three at once. Change 10px if you want rows further apart than columns. */ .elementor-13456 .elementor-element.elementor-element-d3cfa0d { --grid-row-gap: 10px !important; } /* 2. Remove the desktop-only -60px band-aid, which clips 60px off every photo and overlaps the row above. */ .elementor-13463 .elementor-element.elementor-element-8b9f04e { --margin-top: 0px !important; --margin-bottom: 0px !important; } /* ========================================================================== BETTER: do 1 and 2 in the Elementor UI instead of with !important 1. Teams page > click the Loop Grid > Layout tab > Row Gap -> 10 2. Loop Item template > click the outer card container > Advanced > Margin -> set Top back to 0 (it is currently -60 on Desktop only) 3. Loop Item template > click the photo > Advanced/Content > Width -> 100% instead of 303px (and 210px on Mobile) Keeping them as real settings avoids !important and survives redesigns. ========================================================================== *//* End custom CSS */ /* Start custom CSS */body.elementor-page-13456 .entry { margin-bottom:0px;}/* End custom CSS */