Skip to content
Submitted 3 months ago

Blog post review card with responsive CSS

Bruno Banoczi-Cs•40
@L4r4TW
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 are you most proud of, and what would you do differently next time?

I'm most proud of the fact, that I was able to solve this exercise without watching others solutions.

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

  • Making stuff responsive is always a big challenge for me, but fortunatelly the ChatGPT helped a lot

  • Understanding exactly what HTML elements should I use is also hard at the beginning, but I'm sure, that in the futur this will be second nature

  • Placing the items in the right place was also challanging, but watching YouTube videos and using ChatGPT makes everyting possible

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

  • How can I make the fonts responsive without media queries?

  • Is there any any system, that helps to make the CSS file look more organised? (for example margins first, font-size next etc.)

Community feedback

  • Boris•2,870
    @mkborisPosted 3 months ago

    To change font sizes without using media queries you can use the clamp() function, it allows you to set a minimum, preferred, and maximum size, making the font size responsive to the viewport.

    Example :

    body {
  font-size: clamp(1rem, 2vw + 1rem, 2rem); /* Minimum 1rem, ideal size based on viewport, maximum 2rem */
}
    Marked as helpful
    1
  • vinirangel•40
    @vinirangelPosted 3 months ago

    Looks good!

    You just need to add a hover state for the button(change to a different shade of yellow, change cursor to pointer and increase button size on hover)

    1

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