Blog Preview Card using CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Avoid setting a fixed height for the component; remove "height: 60%" because it can cause text overflow if the content grows. On my laptop, the text overflows.

  • For width, avoid using a percentage. Instead, use max-width to allow the component to adapt to different devices without the need for media queries.

  • Consider using the clamp function in CSS for font-size to make the font responsive without the need for media queries.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1
• 

  Daniel 🛸•44,290

  @danielmrz-devPosted 11 months ago

  Hello Celine!

  Your solution looks awesome!

  About your question:

  • Another option is using the clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout. Hope it helps!

  And Happy New Year! 😁

  0

  ---

  

  John Carruthers•310

  @techyjcPosted 11 months ago

  @danielmrz-dev Interesting, seen clamp used a lot for better responsive design, alone side the minmax function. I have used it in my personal project, currently writing a Help Desk solution using PHP.

  Apologies saw your comment for this solution by Celine and thought I'd reply.

  2