blog preview card using HTML and CSS

Community feedback

• 

  MEHNOOR SHAHBAZ•680

  @Mahnoor366880Posted 16 days ago

  To make the text appear in three lines instead of two in your blog preview challenge, try the following CSS techniques:

  1. Adjust the Width of the Card

  Reduce the card’s width slightly to make the text wrap earlier.

  .card { width: 320px; /* Adjust the width as needed */ }

  2. Increase Line Height

  A slightly increased line-height can help create a more natural text break.

  .description { line-height: 1.5; /* Adjust if needed */ }

  3. Set a Specific Max-Width for the Text Container

  Ensure the text container is narrow enough for proper wrapping.

  .description { max-width: 280px; /* Experiment with this value */ }

  4. Force Line Breaks Using word-break

  This ensures longer words don’t prevent wrapping.

  .description { word-break: break-word; }

  5. Use max-width Instead of width for Responsiveness

  This will allow text to wrap dynamically based on the container’s size.

  .text-container { max-width: 280px; /* Adjust accordingly */ }

  Try implementing these changes and see if they bring your text closer to the required result!

  0
• 

  mariazhestik•60

  @mariazhestikPosted 16 days ago

  Your solution looks really solid! You've structured the HTML well with clear, semantic tags, and the CSS is organized and easy to follow. The layout is clean, and I like how you've handled responsiveness with media queries. The hover effect on the heading adds a nice interactive touch without overdoing it.

  One small improvement could be adding a smooth transition to the hover effect to make it feel a bit more polished. The box shadow gives the card a subtle 3D effect, which works great for this type of design. Also, adding object-fit: cover to the image could help ensure it always fills its container without stretching.

  The code is readable and consistent, especially with how you've set up typography and spacing. For accessibility, making the alt text a little more descriptive would improve the overall experience.

  0