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
Request path contains unescaped characters
Not Found

Submitted

Interactive flipping card rating component using Flexbox

@Chanawin-kmpn

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


In this project I added page flip feature and rate press detection that it is pressed or not, then a notification will be alert. Since I've done all the projects, I think my biggest issue is centering the page. I'm always confused by the width and height dimensions of pages and containers. If anyone can give me some advice. I will be very grateful Thank you!

Community feedback

@rafdidact

Posted

Hey, Chanawin!

If you set the min-height of your body to 100vh and then center the elements in it with the method of your choice, I think you could get rid of the absolute positioning in your attribution and get a nice layout.

Your container doesn't need to be right in the center of the page, like the design shows. If yours has an attribution element then your layout should be different.

Edit:

You can check my code for reference. Hope it helps.

Marked as helpful

0

@Chanawin-kmpn

Posted

@rafdidact Thank for feedback. I think this project I'm too worried about the center page to look like design shows. It was making the page design look messy like using some margins to match the design. Next time I'll try to fix it.

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