Blog preview card with HTML and CSS

Community feedback

• 

  Pedro Silva•140

  @pmcsilva90Posted 7 months ago

  Hi Osiel!

  Your solution to the challenge is quite good, I liked how you used the translate property to make it look like the card is hovering higher. I used margins to separate the different elements but I think your gap solution was better.

  A few suggestions though:

  Your card is not responsive to smaller screens. You could the width property with the min() function a using vw units. Also to change the font size in smaller screens you could use the clamp() function on the font-size property. I think you forgot to change the card title color to yellow when hovering.

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Osiel Hernández•190

  @xXOsielXxPosted 7 months ago

  @pmcsilva90 Hi! Thank you very much for the feedback.

  I finally made the page responsive thanks to your suggestions and this awesome article from CSS Tricks

  • I changed the font-size to be:

  html {
      font-size: 16px;
  }
  
  body {
      font-size: clamp(0.75rem, 0.5625rem + 0.8333vw, 1rem);
  }
  
  .preview-card__title {
      font-size: clamp(1.25rem, 1.0625rem + 0.8333vw, 1.5rem);
  }
  

  • I changed the width of the preview card to be:

  .preview-card {
      width: 100%;
      max-width: 364px;
  }
  

  ...and I changed the title color by adding:

  .preview-card__title:hover {
  	color: var(--primary-color);
  }
  

  Thanks again, for all the support. Keep coding and have fun!

  0