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

Responsive Interactive Rating Component

pmork7 150

@pmork7

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


How do you make the page fit perfectly height-wise on a mobile screen so that there's no room to scroll up or down?

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hi,

Hmm, I don't see any extra room for scrolling so I'm not sure what you mean... The best thing you can do is to center your component vertically and horizontally which you're already doing (although I'd change the min-height to 100vh, 90vh doesn't seem to make a lot of sense). ^^ Your component looks nice and it functions really well so I'm just going to note a few smaller details where you might wanna improve:

  1. All images must have an alt text, even decorative images. Leave the alt text empty if it's decorative (in this case it is) and add an aria-hidden=true as well.

  2. Don't set font sizes in pixels. If a user ever changed their browser settings, your solution would not scale with it. Use rem, for example.

  3. For your buttons please use the button element. Paragraphs probably shouldn't go inside lists anyway (I suppose it's not strictly wrong, it just doesn't make a lot of sense).

  4. Adding a cursor: pointer to all buttons would be great.

I hope this was helpful, good luck! ^^

Marked as helpful

1

pmork7 150

@pmork7

Posted

@FluffyKas

Hi,

Thank you! I appreciate your feedback. I made some of the changes you suggested. I appreciate you taking the time to give me these suggestions. This was extremely helpful.

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