Single price page using CSS Grid

Community feedback

• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  Nice job completing this challenge 👍

  Some of my suggestions are:

  • Try to use a smaller media query breakpoint, because, even though I'm using my laptop to see your solution, I'm getting the mobile version of the site.
  • Add cursor: pointer to button to better indicate interactivity.
  • I'm glad to know that you are taking keyboard user's experience in consideration, but, it doesn't diminish the fact that visual feedbacks based on pointing device's actions is important, so try to add a hover state too for better experience. You can use the same style changes for both :hover and :focus states if you want to. (I'm still learning English, so, hope it all makes sense😀)

  That's all from me. Have fun coding ✨

  Marked as helpful

  2

  ---

  

  LouiseCW•235

  @costelloewardPosted over 3 years ago

  @FarisPalayi Thanks very much, this all made sense. I'm going to review the media queries.

  1
• 

  eagermonument81•210

  @ixtkPosted over 3 years ago

  I would definitely change media query breakpoints. On my monitor that is 1366px, the component stretches full screen and it's not a good experience. After 1400px it looks beautiful.

  Styles were merely created on those pixel values in the project description but we have to account for widths in between or over those.

  Also, if you use little device toolbar icon in chrome dev tools, you can test your website not only on your device width but larger like 1440px and more

  Marked as helpful

  1
• 

  Sebastian Porini•265

  @zebokPosted over 3 years ago

  Hey Louise!

  Try adding a max-width property. So the divs wont grow that much.

  Also, try something else with the media-queries. Right not is not working that nice around 1000px screen width.

  Marked as helpful

  0