Single Price Grid Component, HTML and CSS, Flex-box for layout

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Monica! 👋

  Nice to see you complete another challenge! Good job on this one! 👍

  I suggest,

  • Adding a hover state to the button of the card component.
  • Giving the card component a fixed width in both the desktop and mobile layouts and switching between them using a media query when there is no more room for the desktop layout on the screen. Giving the card a width based on the width of the viewport isn't necessary for this challenge and might prove a little more troublesome to work with! 😉

  Keep learning and coding (and happy coding, too)! 😁

  0

  ---

  

  Monica•100

  @monicamclaughlanPosted almost 4 years ago

  Thank you again for your feedback. It is much appreciated! Do you know of any specific resources to learn more about media queries? Thanks again!

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @monicamclaughlan

  Here's a rather in-depth guide to media queries by CSS Tricks. And here's a similar guide from Polypane's blog. 😀

  0

  

  Monica•100

  @monicamclaughlanPosted almost 4 years ago

  @ApplePieGiraffe Thank you!

  0
• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Hi, Monica. Your solution is great. It's very important to make everything responsive. However, your solution is not good in mobile and tablet view due to fixed margin on body element. And please set overflow hidden on wrapper element to show border radius on bottom left corner. Hope this helps. Happy coding~ :)

  0

  ---

  

  Monica•100

  @monicamclaughlanPosted almost 4 years ago

  Thank you for the feedback! Continuing to work on changing layout from desktop to mobile etc.

  0