Responsive Rating Card

Heyo,

Your solution looks nice! If you allow me though, I have a couple of suggestions:

1. It's not a good idea to define height on most elements (there are exceptions to this, obviously, but in general it's best avoided as it can cause a lot of issues, like unwanted overflow). If you'd like to have some control over spacing, add some padding to them (or margin, when it's applicable).

2. For the little star, it would be best to remove the alt text, it's just a decorative image so it shouldn't be announced by screen readers. You could also add an aria-hidden=true to it. Same goes for the other image (the small machine you see when the form is submitted).

3. It would be more semantic to use checkbox inputs (or the very least buttons, if you can't be bothered with the styling) for the rating numbers.

4. When no rating is selected, you can't press on the submit button. It's great you paid attention to this but it would be nice if there was some sort of visual indicator that the button is disabled and the form cannot be submitted.

5. You have a width: 100% and height: 100vh on the app container. Defining width here isn't necessary, it's 100% by default. The height should be swapped for min-height: 100vh, so it's not locked.

6. You could try using rem instead of pixels. Pixels should mostly be used for setting small details, like box-shadow or border but definitely not widths and font-sizes.

7. Your rating numbers are a little too spaced out in desktop view I think!

The structure of your Sass file seems fine btw! In your personal projects, I believe you could structure it as you please. I also tend to add the media queries to each element individually, it's easier to find things that way ^^

@Clytax I don't use Sass so I cannot comment on your approach with the media query but I can help make your component responsive when zoomed in and out.

You can start by removing the height and adding a gap to space the children elements out and also set a width in rem to make the rating element to adjust according to the screen size or zoom level

.rating{
    width: 30rem;
    height: unset;
    gap: 2rem;
    margin: 1rem;
}

Wow, thanks for the amazing feedback! This is really useful and I will try to change some things immediately! I've heard about not setting heights a lot, but I've never been comfortable with it I think it's just something you have to get used to. And I need to get used to rem too, not so sure about that yet but a little research will do it :)

Thanks again!