Skip to content
Submitted 5 months ago

Blog Preview Card Component

Noor Muhammad Raza•90
@noormuhammadraza
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I could not style the image and control the width of it. I tried many things to crop the image to look exactly like the design. Finally I used object-fit to solve the issue.

What specific areas of your project would you like help with?

I would like to know how to reduce the font-size on mobile without using media queries. Also I would like to get help on how to style the image properly

Community feedback

  • Aris.•60
    @idatenkiddyPosted 5 months ago

    You can also use rem units which you can get accurate ones from Figma design file in Figma get the width and height size(in pixels) and convert it to rem using online converters. I did that.

    For reducing font size on mobile without media queries, you can use relative units like vw (viewport width) or vh (viewport height). These units scale with the size of the viewport.

    For styling images, using object-fit is a good start. Here are some additional tips: Use max-width: 100%; to ensure the image doesn't overflow its container. Use height: auto; to maintain the aspect ratio.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord