I am currently trying to adjust the height of the step in my registration process, but the arrow size remains unchanged. I have included the code snippet below, which I obtained from another website. Can anyone provide guidance on how to set the step arrow to the same height of 50px?
Code Snippet:
<div class="steps">
<div class="now">Register</div>
<div class="active"></div>
</div>
CSS Styling:
/*******************************
Step
*******************************/
.steps > * {
display: inline-block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
background-color: #FFFFFF;
color: #888888;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.steps > *:after {
position: absolute;
z-index: 2;
content: '';
top: 0em;
right: -1.45em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFFFFF;
border-top: 1.5em solid transparent;
width: 0em;
height: 0em;
}
/*******************************
Group
*******************************/
.steps {
letter-spacing: -0.31em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 0.3125rem;
-webkit-border-radius: 0.3125rem;
border-radius: 0.3125rem;
}
.steps > * {
letter-spacing: normal;
width:150px;
height:50px; // i set the height from here
}
.steps > *:first-child {
padding-left: 1.35em;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
}
... (remaining code included as is)