Skip to content
Submitted 5 months ago

Responsive blog card using flexbox and CSS clamp() property

Arnaud Lahaut•200
@Arnotts33
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?

First time using this css property. The challenge asked for a responsive font-size without using media queries. Found this property to be the most suitable after doing some research. Still trying to understand how it works.

I am going to work more on responsiveness with media queries and properties like clamp.

I will also dive a bit more into Figma to understand how to better use it and get the most out of the figma files.

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

I struggled first with what was asked concerning font-size responsiveness. I did some research and found an article about the CSS clamp() property.

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

The main aspect that could be of a problem is the beginning of a project. Should I use semantic html? Should I wrap every element into div containers?

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    Hi!

    The short answers for your questions are yes and no =)

    Yes, you should use semantic tag. At first it's a main tag - it could be .card element in your case. Than you could replace all the span with p (actually "Learning" thing looks like the link, but this project is out of context, so never mind =)).

    And no, you shouldn't wrap every element to div, it's just create more unnecessary tags. Your layout is quite good now =)

    The clamp() function takes three parameters. The first and last are defines the minimum and maximum of the value. And the middle one is relative value which would change within that range. In your case the font size will be 1.1vw (which means 1,1% from width of the screen) but would never be smaller than 12px and larger than 14px.

    And responsive tips. Try not to hardcore width for text elements (I mean .tag-learning and .date) and height for the container element. In real project the content could change time to time, so it's better if the space would adjusting to it.

    Hope that could help. Good luck in your frontend journey and fell free to ask anything if need =)

    Marked as helpful
    1
    Arnaud Lahaut•200
    @Arnotts33Posted 5 months ago

    Hi @Alex-Archer-I !

    Thanks for the very helpful and thorough feedback.

    1
    Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    @Arnotts33

    You're welcome =)

    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