After creating 5 stars for my page, I realized that it is not mobile-friendly as the stars stack vertically when the screen size is reduced. Is there a simple way to make this design responsive while keeping the stars in a horizontal layout?
I attempted to add more divs to maintain the horizontal alignment of the stars regardless of the screen size.
body {
background-color: #FFFFFF;
}
.flex {
display: flex;
/*14vm*/
width: 16vw;
margin: 0 auto;
justify-content: space-between
}
.rate {
position: relative;
/*46vm*/
height: 65vm;
padding: 0 10px;
}
.rate:not(:checked)>input {
position: absolute;
top: -9999px;
}
.rate:not(:checked)>label {
float: right;
width: 1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 35px;
color: #ccc;
}
.rate:not(:checked)>label:before {
content: '★ ';
}
.rate>input:checked~label {
color: #9d0505;
}
.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
color: #9d0505;
}<div class="flex">
<div class="rate">
<input type="radio" onclick="rate1_scr5();" id="star10" name="rate1" value="1" />
<label for="star10" title="text">5 stars</label>
<input type="radio" onclick="rate1_scr4();" id="star9" name="rate1" value="2" />
<label for="star9" title="text">4 stars</label>
<input type="radio" onclick="rate1_scr3();" id="star8" name="rate1" value="3" />
<label for="star8" title="text">3 stars</label>
<input type="radio" onclick="rate1_scr2();" id="star7" name="rate1" value="4" />
<label for="star7" title="text">2 stars</label>
<input type="radio" onclick="rate1_scr1();" id="star6" name="rate1" value="5" />
<label for="star6" title="text">1 star</label>
</div>
</div>