Product-prominentimage cards on IE11 look broken

Search
1

Hello!
I was QA-ing my build in BrowserStack and noticed that in IE11 the card titles and descriptions were overlapping. I noticed that there wasn’t defined padding/margins between the 2 which might be the culprit, but I’m not having this same issue on any other browsers. Let me know if there’s anything I can do to get this fixed!

Screen Shot 2020-12-01 at 3.07.13 PM
Screen Shot 2020-12-01 at 3.07.13 PM1456×830 172 KB

2

Fixed!

I was using the code here to fix the card buttons to the bottom of the card but swapped out
height: 100% with flex-grow: 1 in the following snippet (only for contentWrapper). Here’s the updated code I used:

   .HitchhikerProductProminentImage {
    &-body {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    &-contentWrapper {
      justify-content: space-between;
      flex-grow: 1;
    }
  }
2 Likes