Why is my div changing height w/media queries?

0
votes

I am building a grid of container divs using CSS grid.

My main CSS is aimed at a mobile view, I then use a media query for a desktop view, and a second media query for a wider screen.

In effect, I switch from grid-template-columns:1fr (Mobile) to grid-template-columns: 1fr (Desktop) to grid-template-columns: 1 fr 1fr (Widescreen).

So far, so good. However, when I resize between the 2 desktop views, my div changes height (despite height: auto).

I'll paste the relevant CSS:

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.special {
  width: 90%;
  height: auto;
  border: 1px #000 solid;
  box-shadow:0 0.1rem 0.5rem rgba(0,0,0,0.2);
  justify-self: center;
  border-radius: .5rem;
  padding-bottom: 5%;
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

@media only screen and (min-width: 415px) {
  /*.container {
    grid-template-columns: 1fr;
  }*/

  .special {
    width: 550px;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

.container used to hold the CSS grid, and .special is the "card". Everything inside .special also uses height:auto.

Example images:

min-width: 415px media query

min-width: 1200px media query

I've been scratching my head for a few days now. Can someone shed some light for me?

Codepen for reference: https://codepen.io/stetsonthree/pen/YYQgze

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.special {
  width: 90%;
  height: auto;
  border: 1px #000 solid;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  justify-self: center;
  border-radius: .5rem;
  padding-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.special:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 255, 0, 0.2);
}

.spc-banner {
  text-align: center;
  background-color: #B5B5B5;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  letter-spacing: 0.1em;
}

.spc-promo {
  text-align: center;
  background-color: #B5B5B5;
  border-radius: 0 0 .5rem .5rem;
  width: 50%;
  margin: auto;
  margin-bottom: 2%;
}

.inner-container {
  display: grid;
  grid-template-columns: 100%;
  text-align: center;
  justify-items: center;
}

.spc-image img {
  width: 250px;
  max-width: 100%;
  height: auto;
}

.spc-deals {
  height: auto;
  width: 100%;
}

.spc-contact {
  margin-top: 15px;
  width: 100%;
  height: auto;
}

.spc-cta {
  margin-top: 15px;
  width: 100%;
  height: auto;
}

.deals-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 3vmin;
}

.btn-contact {
  width: 90%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #979799, #666766);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

.btn-deal {
  width: 90%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #1f72e4, #1c62c5);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

.side-by-side-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  align-items: flex-end;
  margin: auto;
  margin-top: -15px;
}

.btn-sub {
  width: 45%;
  background-color: #556270;
  background-image: linear-gradient(to bottom, #979799, #666766);
  border: 1px solid #1e3650;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  -webkit-text-size-adjust: none;
  mso-hide: all;
}

@media only screen and (min-width: 415px) {
  /*.container {
    grid-template-columns: 1fr;
  }*/
  .special {
    width: 550px;
    /* max-height: 436px; */
  }
  .spc-banner {
    letter-spacing: 0.25em;
    line-height: 1.75em;
    font-size: 1.25em;
  }
  .inner-container {
    margin-top: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 1vmin;
  }
  .spc-image {
    height: auto;
    width: 100%;
  }
  .spc-image img {
    width: 250px;
    max-width: 100%;
    height: auto;
  }
  .spc-deals {
    height: auto;
    width: 100%;
  }
  .btn-contact {
    width: 75%;
  }
  .btn-deal {
    width: 75%;
  }
  .spc-disclaimer {
    margin-top: -15px;
    margin-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}
<div class="container">

  <div class="special">
    <div class="spc-banner">
      2017 BMW 320I XDRIVE&nbsp;SEDAN
    </div>
    <div class="spc-promo">
      Available 3.34% APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/250x167" alt="Special">
      </div>
      <div class="spc-deals">
        <div class="deals-container">
          <div>
            <span style="font-size:.8rem;">Lease for</span>
            <br>
            <span style="font-size:1.75rem;font-weight:bold;">$299</span>
            <span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos w/$3995 down</span></div>

          <div>
            <span style="font-size:.8rem;">Zero Down Lease for</span>
            <br>
            <span style="font-size:1.75rem;font-weight:bold;">$299</span>
            <span style="font-size:.9rem;">/mo</span><br><span style="font-size:.75rem;">for 27 mos</span></div>

          <div><span style="font-size:.8rem;">Total savings</span><br><span style="font-size:1.5rem;font-weight:bold;">$5,490</span></div>

          <div><span style="font-size:.8rem;">Buy for</span><br><span style="font-size:1.5rem;font-weight:bold;">$39,955</span></div>
        </div>
      </div>
      <div class="spc-contact">
        &#128222; Call Now<br>
        <a class="btn-contact" href="tel:8005555555">(800) 555-5555</a>
      </div>
      <div class="spc-cta">
        &nbsp;<br>
        <a class="btn-deal" href="#">Get Deal</a><br> &nbsp;
        <br>
        <div class="side-by-side-btns">
          <a class="btn-sub" href="#">View Inventory</a>
          <a class="btn-sub" href="#">Value Your Trade</a>
        </div>
      </div>
    </div>
    <div class="spc-disclaimer">
      *Disclaimer - Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="spc-banner">
      M O D E L
    </div>
    <div class="spc-promo">
      % APR
    </div>
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>

  <div class="special">
    <div class="inner-container">
      <div class="spc-image">
        <img src="https://via.placeholder.com/150x150/cccccc/969696.png?text=Special" alt="Special">
      </div>
      <div class="spc-deals">
        Money
      </div>
      <div class="spc-contact">
        Call Now
      </div>
      <div class="spc-cta">
        Apply
      </div>
    </div>
  </div>
</div>
1
htmlcssmedia-queriescss-grid

1 Answers

1
votes

This happens because you use a percentage for the padding-bottom:

padding-bottom: 5%;

Despite being unintuitive, this percentage relates to the width of the element, not the height. Since the width changes, so does how many pixels 5% translates to.

Also see

Why are margin/padding percentages in CSS always calculated against width?

and the specs

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

https://www.w3.org/TR/CSS2/box.html#padding-properties