0

I'm having some difficulties with a page on my shopify store with IE 10/11Support. It's curious to me that this page specifically is so different than the others on the site (how it works, pricing). What recommendations can you give me for allowing this page to look like it does on firefox,chrome,and edge.

<header class="section-header">
      <h1 style= "text-align: center;"> About Us </h1>
</header>

<div class="rte">
  {{ page.content }}
</div>

<style>
  #container{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.h1{
  flex:0 1 auto;
  width:100%;
  margin-bottom: 10px;
  font-size:2em;
  color:#27aae2;
}

.h2{
  flex:0 1 auto;
  margin: 0 0 10px 0;
  font-size:1.3em;
  font-weight:bold;
}

.paragraph{
  margin-bottom: 10px;
  flex:0 1 auto;
}

.breaker_container{
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  padding: 0 25px 0 25px;
}

.row{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

.item--person{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 50%;
}

.item--person__name{
  padding:0px;
  font-weight:bold;
  text-align:center;
}
.item--person__title{
  padding:0px;
  font-style:italic;
  text-align:center;
}
.item--person__image{
  padding:0px;
  margin:1em;
  text-align: center;
}

.item--person__bio{
  margin:1em;
  text-align:left;

}

@media screen and (max-width:650px){
  .item--person{
  width:auto;
  height: auto;
  }
}

@media screen and (min-width:0\0) {
  .sep--orange_left{
  padding: 0 15px 0 15px;
  }

  .sep--orange_right{
  padding: 0 15px 0 15px;
} 
}
</style>

This is the page in question: https://suppluxe.com/pages/about-us

Daz
  • 1

0 Answers0