Three Column Preview Card

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Jennifer, great job! The designs match the mockups well.

  I've just noticed a couple of things that might be worth considering:

  • Ideally, grid should be used for the columns as this retains the intrinsic value of the elements (ie. keeps the widths consistent.) Because flex permits greater flexibility, your content is being squeezed together and subsequently causing both horizontal overflow with the parent container and vertical overflow with the child column components between breakpoints 695px and 377px. If you check this in your dev tools you should notice this on your end
  • Also, it's great you've added the normalize.css, however the one by Andy Bell I think is much more up-to-date. Here's a link to it Link
  • Locally host your Google Fonts for privacy and performance reasons. You can download them from the site, convert them to .woff2 format, upload them to your src files then reference them in your css using @font-face. Here's a great video going through why this is the case and how to achieve it Link
  • Your font-size values should be in rem for accessibility reasons. Here's a good article explaining why this is the case Link

  Hope this helps!

  Marked as helpful

  3

  ---

  

  P

  Jennifer Tieu•40

  @jennifertieuPosted over 1 year ago

  Hi @asbhogal, thank you for taking the time to provide feedback. This is awesome! I didn't think to use grid, but your reasoning makes sense as well as your other comments. I'm going to work on updating the solution, thank you again!

  1

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  @jennifertieuu no problem, glad to help!

  0
• 

  Muhaddis Rehman•100

  @MuhaddisRehmanPosted over 1 year ago

  For button state you could just add the border on normal state and just change background on hover that way the button won't cause the height difference you get with and without border. A little transition also makes things visually smooth.

  .card-button {
    border: 1px solid var(--very-light-gray);
    background: var(--very-light-gray);
    padding: 1rem 2rem;
    border-radius: 30px;
    cursor: pointer;
    color: inherit;
    transition: all 0.3s ease;
  }
  
  .card-button:hover {
    background: inherit;
  }```
  

  Marked as helpful

  1

  ---

  

  P

  Jennifer Tieu•40

  @jennifertieuPosted over 1 year ago

  @MuhaddisRehman good idea, I'll try that! Thank you so much for the feedback!

  1