Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Blogpost preview with clamp and flex-box

accessibility
Ineke•130
@Ineke84
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of how I incorporated quite some concepts that are relatively new to me: css properties, clamp().

Next time I should read the challenge a bit better (at first I missed the challenge to not use media query for font-sizes untill I wanted to submit the challenge). Also I want to look more indepth at the designs, this time I kept finding extra things to add (like different font-sizes for devices and multiple changes on hover)

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

Most challenging is the alignment of the blog preview and the attribution at the bottom. At the moment I fixed it with flex-box, but I'm not sure if that's the best option.

Also using clamp() is still challenging. I read/watched quite some things about it and copied some things from those posts and it's working. But I need some more practice.

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

I would love to hear if there's another/better solution for the positioning of de blogpreview and the attribution at the bottom. I want the card vertically centered in the middle and the attribution at the bottom of the screen as longs as this would fit. If the blogpreview gets to big with a narrower screen only then the attribution should move further down so you would need to scroll down to see it just below the card. At the moment I fixed it with flexbox and height with clamp(). But I'm not really sure about it.

Any other feedback is also very welcome.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Ineke's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License