0

I have three flex-box cards each identical with an img at the top followed by an info section split into two columns. It looks fine in all browsers, except Internet Explorer 9 and 11 (I haven't been able to test IE10). The problem is that there is an excessive amount of bottom padding that has been added. Please can someone advise how to fix this?

.features-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 120rem;
  width: 100%;
}

.features-card {
  box-shadow: 0 .6rem .9rem 0 rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  transition: transform .3s;
  width: 100%;
}

.features-card:nth-child(3) {
  margin-bottom: 0;
}

.features-card-img {
  border-bottom: 3px solid #fdd400;
}

.features-card-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1.6rem 5%;
  width: 100%;
}

.features-card-info-col-1 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
}

.features-card-info-col-2 {
  margin-left: 1rem;
}

@media screen and (min-width: 56.25em) {
  /* 900/16 */
  .features-container {
    flex-direction: row;
  }
  .features-card {
    margin-right: 2.5%;
    max-width: 35rem;
  }
  .features-card:nth-child(3) {
    margin-bottom: 3rem;
    margin-right: 0;
  }
}
<div class="features-container">
  <article class="features-card">
    <a class="features-card-link" href="">
      <img class="features-card-img" src="" alt="">
      <div class="features-card-info">
        <div class="features-card-info-col-1">
          <h3 class="features-card-heading">Heading</h3>
          <p class="features-card-text">Some text</p>
        </div>
        <div class="features-card-info-col-2">
          <i class="fas fa-angle-double-right"></i>
        </div>
      </div>
    </a>
  </article>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
MikeP23
  • 23
  • 1
  • 4
  • Flexbox isn't supported in IE9 and IE10/11 have major bugs and you have to use older syntax for IE10. Why are you trying to support IE9/10? If you need to support those browsers, flexbox isn't for you. And since Microsoft already deprecated support for IE9 and 10, you probably shouldn't worry about those browsers. https://caniuse.com/#search=flex-box – disinfor May 13 '19 at 21:34
  • Sorry, I'm really only wanting to support IE 10 and 11, but I tested on IE 9 and the result was the same as IE11. I use all the flex-box browser prefixes but didn't want the code to be too long so i omitted them. – MikeP23 May 13 '19 at 22:08

1 Answers1

0

IE9 do not support flexbox. You can refer to the first answer of this question: Flexbox code working on all browsers except Safari. Why? I used your code to make a demo and it looks fine in all browsers including IE11. Modify the css part and it will looks the same in IE10:

.features-card-img { border: 0px; border-bottom: 3px solid #fdd400; }

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • I've added the above code however the problem persists in IE11. the version is 11.2906.14393.0 if that helps? I've tried making the .features-card display: block which works to remove the padding when the .features-container is set to flex-direction row but not when it is flex-direction column. – MikeP23 May 14 '19 at 11:59
  • My IE11 version is 11.706.17134.0 so I think it is due to the old version of IE. Your code works well on my side and there's no difference after I changed it as you said. My suggestion is that you could move to the latest version of IE11. – Yu Zhou May 15 '19 at 01:53