Submitted 6 months ago

Responsive Blog Preview Card

Shiv•350

@undrthegraveyard

Preview site View code

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 would try to implement em and rem more thoughtfully in my future projects. Based on the last feedback I received, I tried to do just that but there is still much more room for improvement.

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

It was difficult to make the content(text) responsive based on the size of the overall component, I used the relative measuring units instead of using pixels to make it as responsive as possible.

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

I don't know, the font size in my card was not very responsive to the overall size of the component, in the mobile preview it looked fine, but in the desktop, the font size looked relatively small, despite using relative units.

Community feedback

Koda👹•3,830
@kodan96Posted 6 months ago
hi there! 👋

I think my last feedback caused some misconception in you about how rem works. When setting your font-size using rem it gets calculated from the :root element of your html file. If you don't specify a font size there your site will use the browser's default value (which is in most modern browsers equals to 16px). Since you didn't specify base value for font-size, your page is using the default, and you didn't use @media queries to modify the font size later either, so your page sticked with the default no matter what's the screen size the page gets viewed on.

Just use @media queries and modify your base font-size in the :root element. Or specify one clamp() function in the same place for font-size and you'll have responsive typography.

Hope this helps 🙏

Good luck and happy coding!
0
Shiv•350
@undrthegraveyardPosted 6 months ago
@kodan96

Oh, I get it. @media queries is a new concept to me. I will for sure get myself comfortable in using it. As in the case of the :root element, I have used it in my ongoing project to define my base font size using clamp. Also, used em for padding, and margins.

I really appreciate your patience, and feedback, honestly.

Thank you so much. 🙏
1

Please log in to post a comment

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