Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive-Rating-Component using Flexbox and JavaScript

magname 60

@magname

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Here's my solution to the Interactive rating component challenge.

Changed the color scheme a little.

Problem that I faced

  • My first container is not following the margin when I resize the window.

Feel free to leave a suggestion that can help me improve my code. Also help me to add Media queries to my code.

Community feedback

@mmubashshir

Posted

Hi, Pretty could job nailing the design.

Margin of 3rem which does give a margin till my width of the screen is 420px, which is pretty much the size of mobile phones.

If you want to target lower screen sizes use media queries and decrease the width of your first container

@media only screen and (min-width: 750px) and (max-width: 1200px){
// styles when screen between 750 and 1200px
.card{
// styling
}
}
@media only screen and (max-width: 750px) {
// style below 750px
.card {
// styling
}
} 
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord