I'm working on someones code which seems to display well on chrome, firefox etc but not on IE 11 (surprise). Basically the header / call to action text and button should be vertically aligned (Which it does fine in chrome) but in IE the content is stuck at the top of the page?
I've had a go at it using flexbox but I'm out of ideas... Could someone please have a look at the source of this page and figure out a better way?
Would really appreciate if someone has some better CSS to throw in!
Thanks for any help
<div class="cta">
<div class="small-cta">
<div class="l-container">
<div class="l-row">
<div class="l-col min-0--8">
<div class="small-cta-left-container">
<h1 class="small-cta-header">Ask the Experts</h1>
<div class="small-cta-text__small">
Get answers and insights from industry professionals and other experienced
users.
</div>
</div>
</div>
<div class="l-col min-0--4">
<div class="small-cta-right-container">
<a class="small-cta-button" href="/login.html"><span class=
"cta-button__inner">Ask a Question</span></a>
</div>
</div>
</div>
</div>
</div>
.cta {
transition: transform .3s;
backface-visibility: hidden;
background: #373c44;
min-height: 120px;
}
.small-cta {
color: #ffffff;
line-height: 1.6;
text-align: center;
width: 100%;
max-width: 692px;
margin: 0 auto;
}
.l-container {
width: 100%;
margin: 0 auto;
padding: 0 10px;
max-width: 1190px;
}
@media (min-width: 0px)
.min-0--8 {
display: block;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
@media (min-width: 0px)
.min-0--4 {
display: block;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
@media (min-width: 768px)
.l-container {
padding: 0 16px;
max-width: 1202px;
}
@media (min-width: 768px)
.l-row {
margin-left: -16px;
margin-top: -16px;
}
.l-row {
display: flex;
flex-flow: wrap;
margin-top: -10px;
margin-left: -10px;
}
.small-cta-left-container {
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
min-height: 120px;
}
h1.small-cta-header {
font-size: 25px;
text-align: left;
margin-top: 0px;
}
.small-cta-text__small {
color: #ffffff;
font-size: 13px;
margin-top: -5px;
text-align: left;
margin-bottom: 6px;
}
.small-cta-right-container {
flex-direction: column;
justify-content: center;
overflow: auto;
min-height: 120px;
display: flex;
}
.small-cta-button {
display: inline-flex;
color: #ffffff;
background: #ee3237;
background: -moz-linear-gradient(left, #ee3237 0%, #f87c43 100%);
background: -webkit-linear-gradient(left, #ee3237 0%,#f87c43 100%);
background: linear-gradient(to right, #ee3237 0%,#f87c43 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3237', endColorstr='#f87c43',GradientType=1 );
transition: all .3s;
border-radius: 2px;
border-bottom: 3px solid #af171b;
height: 44px;
text-align: center;
vertical-align: middle;
width: 100%;
max-width: 450px;
}
.cta-button__inner {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
text-align: center;
white-space: nowrap;
width: 100%;
padding: 0 30px;
font-weight: 600;
}
