I have been facing an issue with the responsiveness of a div element in my design. Everything was going well until I introduced a blue gradient and grey vertical line to the right side. Since then, I've been struggling to make it look good on different screen sizes. The blue gradient and the vertical line are causing me a headache whenever I try to adjust the responsiveness.
.root_class {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
margin: 0 auto;
border: thin solid #ccc;
}
.text {
font-size: 3rem;
margin: 0;
margin-right: 10rem;
}
.percentile-card {
transition: 0.3s;
margin: 1rem;
padding: 5px;
color: white;
}
.percentile-card p {
margin: 0;
}
.percentile-card p:first-child {
color: #bbb;
}
.rhs-background{
background-image: linear-gradient(to right,white 60%,#0080ff 60%, #072f9c 100%);
}
@media (max-width: 768px) {
.root_class {
flex-direction: column;
}
.text {
font-size: 2rem;
margin-right: 0rem;
}
}
@media (max-width: 768px){
.perf-type-list{
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
}
.vertical{
border-left: 4px solid #ccc;
height: 145px;
position: relative;
right: 29px;
} <div class="root_class rhs-background">
<p class="text">Where Do i Stand Overall ?</p>
<span class="vertical"></span>
<div class="percentile-card text-center">
<h3>You did better than</h3>
<i class="fa fa-users pull-left" style="margin-left: 40px;font-size: 3em;" aria-hidden="true"></i>
<b style="font-size:3em;">60%</b>
</div>
</div>