0

I am trying to change a grid of images I created using display:grid; so it looks good on IE. In order words, find a solution to display some images side-by-side without using neither grid or flexbox.

The code below works well as you can see with or without display:grid;. However, not on Internet Explorer - IE.

Elements to see: .about__asseenon-images - Parent .about__asseenon-logos - Children

body {
  padding: 5rem;
}
@media screen and (max-width: 900px) {
  body {
    padding: 3rem;
  }
}
@media screen and (max-width: 750px) {
  body {
    padding: 1rem;
  }
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.secondary-heading {
  font-family: "Dancing Script", cursive;
  color: #662d91;
  font-size: 2.5rem;
  text-align: center;
  font-weight: normal;
}
@media screen and (max-width: 1350px) {
  .secondary-heading {
    font-size: 2rem;
    margin: 1rem 0;
  }
}
@media screen and (max-width: 1100px) {
  .secondary-heading {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 750px) {
  .secondary-heading {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 600px) {
  .secondary-heading {
    font-size: 1.1rem;
  }
}

.tablets {
  display: none;
}
@media screen and (max-width: 900px) {
  .tablets {
    display: unset;
  }
}

.about {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  text-align: justify;
  border-width: 5px;
  border-style: solid;
  border-color: #662d91;
}
.about__extras {
  display: flex;
  justify-content: space-around;
  margin: 2rem;
  margin-top: 1rem;
}

.about__extras-figure {
  margin: 0;
  flex-basis: 30%;
  flex-shrink: 0;
}
.about__extras-img {
  margin: 0 auto;
}
.about__extras-info {
  flex-shrink: 1;
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about__asseenon-logos {
  height: auto;
  width: 5%;
  display: inline;
  margin: 0.3rem;
}

/*
1 - Comment The @support to see the result I am trying to get to. 
2 - Test this code on IE. You will see that the 'logos' will cross the screen and increase size.
*/

@supports ((display: -ms-grid) or (display: grid)) {
.about__asseenon-images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [8];
  grid-template-columns: repeat(8, minmax(-webkit-min-content, 1fr));
  grid-template-columns: repeat(8, minmax(min-content, 1fr));
  -ms-grid-rows: (min-content) [3];
  grid-template-rows: repeat(3, -webkit-min-content);
  grid-template-rows: repeat(3, min-content);
  grid-column-gap: 1rem;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
}
.about__asseenon-logos {
  width: 90%;
  grid-column: span 2;
}
.about__asseenon-logos:nth-child(5) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
}
}
<section class="about__extras">
            <figure class="about__extras-figure">
                <img src="http://via.placeholder.com/350x1150" alt="" class="about__extras-img">
            </figure>
            <div class="about__extras-info">
                <div class="about__extras-asseenon">
                    <h2 class="secondary-heading">Beauty and Lifestyle Expert As Seen On:</h2>
                    <div class="about__asseenon-images">
                        <img src="http://via.placeholder.com/250x250" alt="nbc" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="cnn" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Seventeen" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="FOX" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="style networks" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="girls life" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Rolling-Out-Logo" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Hope" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="elev8" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="hello beautyful" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="wdbr" class="about__asseenon-logos">
                    </div>
                </div>
            </div>
        </section>

EDIT

THis is how it looks in IE

enter image description here

This is how it should look (and how it looks in normal browsers

enter image description here

stemon
  • 599
  • 1
  • 5
  • 23

1 Answers1

1

What if instead of using @supports that is not compatible with any version of Internet Explorer (look Documentation on Mozilla Developer) and through JavaScript you detect the browser and add a class to the body. To detect the browser there is a good post like this.

Add a line that includes a class to your page

add lines for Internet Explorer: I prefer not to use 'Flex' in Internet Explorer I never get good results, I prefer to use the classic 'display: inline-block' or 'float: left'

if ((navigator.userAgent.indexOf("MSIE") != -1) 
  || (!!document.documentMode == true)) // if IE > 10
{
  document.body.className += 'InternetExplorer';
}
body {
  padding: 5rem;
}

@media screen and (max-width: 900px) {
  body {
    padding: 3rem;
  }
}

@media screen and (max-width: 750px) {
  body {
    padding: 1rem;
  }
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.secondary-heading {
  font-family: "Dancing Script", cursive;
  color: #662d91;
  font-size: 2.5rem;
  text-align: center;
  font-weight: normal;
}

@media screen and (max-width: 1350px) {
  .secondary-heading {
    font-size: 2rem;
    margin: 1rem 0;
  }
}

@media screen and (max-width: 1100px) {
  .secondary-heading {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 750px) {
  .secondary-heading {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 600px) {
  .secondary-heading {
    font-size: 1.1rem;
  }
}

.tablets {
  display: none;
}

@media screen and (max-width: 900px) {
  .tablets {
    display: unset;
  }
}

.about {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  text-align: justify;
  border-width: 5px;
  border-style: solid;
  border-color: #662d91;
}

.about__extras {
  display: flex;
  justify-content: space-around;
  margin: 2rem;
  margin-top: 1rem;
}

.about__extras-figure {
  margin: 0;
  flex-basis: 30%;
  flex-shrink: 0;
}

.about__extras-img {
  margin: 0 auto;
}

.about__extras-info {
  flex-shrink: 1;
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about__asseenon-logos {
  height: auto;
  width: 5%;
  display: inline;
  margin: 0.3rem;
}


/*
1 - Comment The @support to see the result I am trying to get to. 
2 - Test this code on IE. You will see that the 'logos' will cross the screen and increase size.
*/

@supports ((display: -ms-grid) or (display: grid)) {
  .about__asseenon-images {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(min-content, 1fr)) [8];
    grid-template-columns: repeat(8, minmax(-webkit-min-content, 1fr));
    grid-template-columns: repeat(8, minmax(min-content, 1fr));
    -ms-grid-rows: (min-content) [3];
    grid-template-rows: repeat(3, -webkit-min-content);
    grid-template-rows: repeat(3, min-content);
    grid-column-gap: 1rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center;
  }
  .about__asseenon-logos {
    width: 90%;
    grid-column: span 2;
  }
  .about__asseenon-logos:nth-child(5) {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}


/* Internet Explorer Fix */

.InternetExplorer .about__extras {
  display: relative;
}

.InternetExplorer .about__extras-figure {
  width: 30%;
  display: inline-block
}

.InternetExplorer .about__extras-info {
  width: 60%;
  display: inline-block
}

.InternetExplorer .about__asseenon-images {
  text-align: center;
}

.InternetExplorer .about__asseenon-logos {
  display: inline-block;
  margin: 2% 2%;
  width: 19%;
}

.InternetExplorer .about__asseenon-logos:nth-of-type(7) {
  margin-right: 5%;
}

.InternetExplorer .about__asseenon-logos:nth-of-type(5) {
  margin-left: 5%;
}
<section class="about__extras">
  <figure class="about__extras-figure">
    <img src="http://via.placeholder.com/350x1150" alt="" class="about__extras-img">
  </figure>
  <div class="about__extras-info">
    <div class="about__extras-asseenon">
      <h2 class="secondary-heading">Beauty and Lifestyle Expert As Seen On:</h2>
      <div class="about__asseenon-images">
        <img src="http://via.placeholder.com/250x250" alt="nbc" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="cnn" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Seventeen" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="FOX" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="style networks" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="girls life" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Rolling-Out-Logo" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Hope" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="elev8" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="hello beautyful" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="wdbr" class="about__asseenon-logos">
      </div>
    </div>
  </div>
</section>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Hugo Stiven Laguna Rueda
  • 159
  • 6
  • Thanks Hugo, The problem is that I don't understand why in IE the logos are displaying like you see in the first image. I would like to find a way so that they display like second image in IE. – stemon Apr 18 '18 at 00:30