I am a beginner with Sass and CSS. I wanted to create a rating and comment section which looks fine on a laptop screen, but appears off on smaller screens. It seems like the layout might be incorrect or maybe I didn't follow grid layout guidelines properly, or perhaps some of the SCSS properties are wrong.
Here's what I have tried:
<div class="container-fluid rate__box">
<div class="row mt-3 mb-3">
<div class="col col-12">
<div class="card">
<div class="row">
<div class="col-3 img__gold"> <img src="https://i.imgur.com/xELPaag.jpg" width="80" class="rounded-circle mt-2"> </div>
<div class="col-9">
<div class="comment-box">
<h4>Add a comment</h4>
<div class="rating"> <input type="radio" name="rating" value="5" id="5"><label for="5">☆</label> <input type="radio" name="rating" value="4" id="4"><label for="4">☆</label> <input type="radio" name="rating" value="3" id="3"><label for="3">☆</label> <input type="radio" name="rating" value="2" id="2"><label for="2">☆</label> <input type="radio" name="rating" value="1" id="1"><label for="1">☆</label> </div>
<div class="comment-area"> <textarea class="form-control" placeholder="What is your view?" rows="4"></textarea> </div>
<div class="comment-btns mt-2 text-center">
<button class="btn btn-success btn__hover send btn-sm">Send <i class="fa fa-long-arrow-right ml-1"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS:
.rate__box {
.col-12 {
display: flex;
justify-content: center;
background: #e04529;
padding-top: 3rem;
padding-bottom: 3rem;
// Remaining SCSS rules...
}
}
// More SCSS rules...
@media screen and (max-width:900px){
// Responsive styles for width up to 900px
}
@media screen and (max-width:500px){
// Responsive styles for width up to 500px
}Here are screen captures showing the design on large and small screens:
Large screen:
https://i.sstatic.net/AdPLZ.png
Small screen:
https://i.sstatic.net/FF6kf.png
To make this fully responsive, ensure that the layout and CSS properties are correctly applied based on media queries for different screen sizes. This will help in achieving a consistent user experience across all devices.