Skip to content
Submitted over 2 years ago

Order Summary - hover states

Gsteele Drackkon•30
@WildSpaceCadet
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

project 3, struggled with vertical alignment and sizing as the page size changes. if anyone can give advice would be very much appreciated, i also think having 3 flexbox's is not good practice..

alos the hover state over the button comes up with the edit cursor and not the click cursor how do i fix this?

Community feedback

  • Dan Kant•310
    @Dan-KantPosted over 2 years ago

    Good day buddy, here are some suggestions to tackle some of your issues · Set min-height: 100vh; to your body to vertically align your card. · You gave your card width: 50vh; vh stands for view height, but you are using it with width property. I suggest using max-width and using relative units like rem. Moreover, could you specify your last issues?I guess we can combat it with more clarity

    Marked as helpful
    0
    Gsteele Drackkon•30
    @WildSpaceCadetPosted over 2 years ago

    @Dan-Kant thanks very much that helped.. let me try and keep that in my head moving forward now haha with the hover state over the 'proceed to payment' the cursor icon is different to when i hover over 'Change' and 'Cancel Order'... i hope that gives more clarity to what my question is about.

    0
    Salahuddin Ahammed•120
    @SalahuddinAhammedPosted over 2 years ago

    @WildSpaceCadet Give cursor: pointer to btn class to show click cursor on the element. Or you can give href="#" to the element.

    Marked as helpful
    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