Skip to content
Submitted almost 2 years ago

Interactive flipping card rating component using Flexbox

Chanawin Kamolpanus•350
@Chanawin-kmpn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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

  • Adán Estévez•320
    @rafdidactPosted almost 2 years ago

    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 Kamolpanus•350
    @Chanawin-kmpnPosted almost 2 years ago

    @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

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