On IE 11 some of the text of a section is getting mangled.
It should look like this and does on every other browser I've tried (Chrome, Firefox, safari, edge etc).
I'm also using a gulp package to compile the scss below which adds all the vendor prefixes to the css needed for compatibility on older browsers.
The HTML is also below. Has anyone else encountered this error before?
Everything I try just hasn't worked.
I know its not a problem with the flex-box since the squares are arranged exactly as they should be.
To me it seems like the width values aren't being interpreted at all but if that's the case I have no idea how to fix it.
.get-involved {
padding-top: 30px;
margin-bottom: 120px;
text-align: center;
}
.get-involved .tag-line-get-involved {
margin: 0 auto;
max-width: 570px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
font-weight: bolder;
}
.get-involved .square-container {
margin-top: 40px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.get-involved .square-container div {
margin-top: 40px;
width: 250px;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
@media all and (max-width: 1079px) {
.get-involved .square-container div {
width: 350px;
padding: 0 30px;
}
}
@media all and (max-width: 900px) {
.get-involved .square-container div {
width: 300px;
}
}
.get-involved .square-container div .square {
margin-bottom: 20px;
width: 150px;
height: 150px;
border: 2px solid white;
text-align: center;
color: white;
cursor: pointer;
display: inline-block;
font-size: 14pt;
}
.get-involved .square-container div .square p {
padding-left: 10px;
padding-right: 10px;
}
.get-involved .square-container div .square-orange {
background-color: #f38331;
}
.get-involved .square-container div .square-orange:hover {
background-color: #e4680d;
}
.get-involved .square-container div .square-blue {
background-color: blue;
}
.get-involved .square-container div .square-blue:hover {
background-color: #0000cc;
}
.get-involved .square-container div .square-aqua {
background-color: #63abb5;
}
.get-involved .square-container div .square-aqua:hover {
background-color: #4a919b;
}
.get-involved .square-container div .square-green {
background-color: #60bf3b;
}
.get-involved .square-container div .square-green:hover {
background-color: #4c982f;
}
.get-involved .square-container div .description {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}<section id='get-involved' class='get-involved'>
<h1 class='header'>Get Involved</h1>
<p class='tag-line tag-line-get-involved'>
Become a partner in action!
</p>
<div class='square-container'>
<div>
<button ui-sref='launch' class='square square-orange'>
<p>Launch a Chapter</p>
</button>
<p>Start a chapter on your campus!</p>
<p class='description'>We provide all the necessary resources and guide you through the process so you can spend less time with the setup and more time effecting change!</p>
</div>
<div>
<button ui-sref='become-mentor' class='square square-blue'>
<p>Become a Mentor</p>
</button>
<p>Are you a young college alum looking to get involved?</p>
<p class='description'>Apply to mentor a team of studentes committed to making change in your community. We make it easy to give back!
</p>
</div>
<div>
<button ui-sref='nominate' class='square square-aqua'>
<p>Nominate an
<br>Issue Advisor</p>
</button>
<p>Do you know a great advisor for the network?</p>
<p class='description'>Advisors join our student teams on a bimonthly call to share insight into new developments in their field and answer questions.
</p>
</div>
<div>
<button ui-sref='support' class='square square-green'>
<p>Support Kinetic Global</p>
</button>
<p>Support college students making change in your community!</p>
<p class='description'>Kinetic Global is a lean operation, so we offer multiple ways to contribute to the network (financially and in-kind).</p>
</div>
</div>
</section>
