Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor - Blog preview card solution

paulDev 440

@dev-paulL

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Accessiblity, and making good use of the clamp() and calc().

Community feedback

P

@gmdpickett

Posted

Great work on this challenge, so close to the design.

You mention using clamp() and calc(), I'll be looking these up as I haven't heard of clamp(), calc() I've used but not thought of using it for font sizes on mobile designs. Have you considered just using a media query to alter the design for mobile? It also appears that some of your margins are off. You can use the Figma file to see what these should be, if you highlight a section and then hold down alt (Win) or option (Mac) it will display margins and padding. If you have a Pro subscription try using the Dev tab to see the CSS if you get stuck.

Keep up the great work!

0

paulDev 440

@dev-paulL

Posted

@gmdpickett Hi, Thank you for your feedback 👍 Yes I thought about using media query but in the Ideas to test yourself, they say "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries."

You are right about the margins and paddings, I will pay more attention to the Figma file in next projects. I only checked the shadow and texts in this one.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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