I used width and max-width for the responsiveness

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Francis!

  I can't view your code, it's 404. Make sure that it's not a private repo.

  I will only give my feedback based on what I see.

  • The card has full width on my mobile device, try to add padding to prevent that.
  • All interactive elements like, Change, Proceed Payments, and Cancel Order should have a hover effect.
  • The body should have pale blue background.

  That's it! Hopefully this is helpful!

  0
• 

  ravenloue•40

  @ravenlouePosted over 3 years ago

  It looks very close to the design overall, but I'm noticing a few issues.

  The desktop background image is aligned to the left and doesn't cover the whole page. Someone suggested to me to use "background-size: 100vw 40vh" to handle this on my own submission.

  You said in your github link that you had used 'width and max-width' in flexboxes to handle responsiveness, but it doesn't feel very responsive. The box moves around and stays centered, but the background and container size don't change for mobile versions. Also, the buttons don't change on hover like they do in the design.

  I personally found using media queries efficient and super helpful for separating the mobile version from the desktop version. But if you're bound and determined to avoid them, I found this blog that might be what you're looking for in terms of a solution.

  0