I have the following code that lists 5 steps in a row on large screen devices like laptops and desktops and would like to make the same code responsive for mobile and tablets but for the past 3 days i can't get it to work.
I have tried media queries and they don't seem to do the trick. How can I alter the code to make it responsive?
.row-equal-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.p_column {
background: #fff;
color: #000;
font-size: 22px;
font-weight: 500;
margin: 5px 15px 0;
padding: 30px 15px;
border: solid 1px #d4d4d4;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.08);
border-radius: 2px;
position: relative;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
width: 100%;
}
.p_column:first-child {
background: #c81f56;
color: #fff;
border: solid 1px #c81f56;
}
/*Code for arrow*/
.p_column:before,
.p_column:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 42%;
bottom: 86px;
border-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
/* Stroke */
.p_column:before {
right: -30px;
border-left-color: #d4d4d4;
border-width: 15px;
}
/* Fill */
.p_column:after {
right: -29px;
border-left-color: #fff;
border-width: 15px;
}
.p_column p {
font-size: 16px;
line-height: 24px;
margin-bottom: 0
}
.p_column:first-child:before {
border-left-color: #c81f56;
}
.p_column:first-child:after {
border-left-color: #c81f56;
}
.p_column:last-child:before,
.p_column:last-child:after {
display: none
}
/*color change hover*/
.p_column:hover {
background: #b0b9c1;
color: #fff;
border: solid 1px #b0b9c1;
}
.p_column:hover:before {
border-left-color: #b0b9c1;
}
.p_column:hover:after {
border-left-color: #b0b9c1;
}
@media screen and (max-width: 424px) {
.steps-responsive: max-width: 100% !important;
}
@media screen and (min-width: 425px) and (max-width: 768px){
.steps-responsive: max-width: 50% !important;
}
@media screen and (min-width: 1024px){
.steps-responsive: max-width: 16.66% !important;
}
<div class="row" >
<div class="row-equal-height" >
<div class="p_column text-center">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
1
</div>
<h4>
Dial Short-code.
</h4><br/>
<p>
Dial *389*0# on your mobile phone
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
2
</div>
<h4>
Enter MOMO Card Number.
</h4><br/>
<p>
Enter the 16 digits number on the card
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
3
</div>
<h4>
Enter Personal Information.
</h4><br/>
<p>
Enter your first name..
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
4
</div>
<h4>
Key in Security Pin.
</h4><br/>
<p>
Key in your preferred four-digit PIN and confirm the same PIN.
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
5
</div>
<h4>
SMS Confirmation.
</h4><br/>
<p>
An SMS message is received indicating card will be active within 48hrs.
</p>
</div>
</div>
</div>
I want the blocks to remain 5 in a line on wide screens, 2 per row on medium screens (tablets held in horizontal mode) and 1 per row on small screen devices.
Please add this code on your css for responsive.
@media screen and (max-width: 1024px) {
.row-equal-height {
flex-wrap: wrap;
}
.p_column {
width: 25%;
margin: 5px 2% 0;
}
}
@media screen and (max-width: 767px) {
.p_column {
width: 100%;
}
}