I am trying to create a responsive progress bar using flex-direction: column. So far it is working fine in Chrome, Firefox, and IE, but it does not work in Safari.
In Safari the progress bar steps are displayed one under the other instead of in a line.
My css is obviously missing something. Any ideas?
The css & html code is here: https://codepen.io/anon/pen/PeLJWY
Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
margin: 0 auto;
height: 100px;
}
.step-indicator {
display: flex;
align-items: center;
padding: 0 10px;
}
.step {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
z-index: 1;
}
.step-indicator .step-icon {
height: 35px;
width: 35px;
border-radius: 50%;
background: #c2c2c2;
font-size: 8px;
text-align: center;
color: #ffffff;
position: relative;
line-height: 35px;
font-size: 20px;
}
.step-icon a {
text-align: center;
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
.step.active .step-icon {
background: #F08B46;
}
.step p {
text-align: center;
position: absolute;
bottom: -30px;
color: #c2c2c2;
font-size: 12px;
font-weight: bold;
width: 100px;
}
.step.active p {
color: #F08B46;
}
.step.step2 p,
.step.step3 p {
left: 50%;
transform: translateX(-50%);
}
.indicator-line {
width: 100%;
height: 7px;
background: #c2c2c2;
flex: 1;
margin-left: 3px;
margin-right: 3px;
}
.indicator-line.active {
background: #F08B46;
}
</style>
</head>
<body>
<div class="container">
<section class="step-indicator">
<div class="step active active"><div class="step-icon"> <a href="#" title="First Step">1</a></div><p>First Step</p></div> <div class="indicator-line active active"></div>
<div class="step active"><div class="step-icon"> <a href="#" title="Second Step">2</a></div><p>Second Step</p></div> <div class="indicator-line active"></div>
<div class="step"><div class="step-icon"> <a href="#" title="Third Step">3</a></div><p>Third Step</p></div> <div class="indicator-line "></div>
<div class="step"><div class="step-icon"> <a href="#" title="Done!"><i class="fa fa-check" aria-hidden="true"></i></a></div><p>Done!</p></div>
</section>
</div>
</body>
</html>
