single-price-grid-component

Community feedback

• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  Great work on this challenge! You've done a good job of replicating the design of the page.

  I noticed that the card isn't centered properly on smaller screen sizes/viewports because of the default margin added to the body element by the user agent stylesheet in combination with the width: 100vw property you've added.

  To fix this issue, you could use the following code:

  body {
    margin: 0;
    width: 100vw; ❌
  }
  

  margin: 0 removes the margin added by the user agent stylesheet.

  I also removed width: 100vw as it's redundant. The body element takes up the entire width of the viewport by default, so it's not necessary to specify it to do so.

  I also noticed that the entire card, including the text, shrinks when the viewport's height is reduced.

  While this technically makes your page responsive, it isn't ideal for user experience or readability because it means that the font size is based on the viewport's size, causing the text to be unreadable at smaller viewport heights due to how small it is.

  Not only that, because you've set the font size using vh values, the user can't change the size of the font through their browser settings, which is crucial for accessibility.

  It's important to allow users to increase the font size of your page as needed so that they can view the content comfortably, especially for those who have vision problems.

  Finally, there's no indication that the button is a clickable element because there are no changes in styling, which is important to improve the user-friendliness of your site.

  To improve this aspect of your page, you could change the font and background colours on hover, as well as the cursor type:

  .container .card .buttonSection .leftSide button {
    cursor: pointer;
  }
  
  .container .card .buttonSection .leftSide button:hover,
  .container .card .buttonSection .leftSide button:focus-visible {
    background-color: #9ab22a;
    color: #ccc;
  }
  

  Other than that, this is a very good solution!

  Hope this has been helpful! If you need me to elaborate on anything, please feel free to message me. :)

  11

  Marked as helpful