Submitted 6 months ago

Blog preview card solution

Charles7458•80

@Charles7458

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

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

I couldn't make the font size reduce for mobile screen. Next time I'll try mobile-first approach.

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

How do I make the font size reduce for mobile screen? I tried using rem instead of px. Is there another way?

Code

Please log in to post a comment

Community feedback

P
Huy Phan•3,430
@huyphan2210
Posted 6 months ago
Hi, @Charles7458

An easy way to adjust font-size across different viewports is by defining it in CSS media queries.

Since you mentioned adopting the mobile-first approach next time, here's an example of changing the font-size for the body element in different viewports:
```
/* Default styles for mobile devices */
body {
  font-size: 16px;
}

/* Larger screens - tablets and desktops */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 20px;
}
```
Alternatively, you can use the CSS clamp() function for responsive typography without media queries. Here's how:
```
/* Clamp syntax: clamp(minimum, preferred, maximum) */
body {
  font-size: clamp(16px, 2vw, 20px);
}
```
In this example:
- The font size won’t go below 16px.
- It scales dynamically based on 2vw (2% of the viewport width).
- It maxes out at 20px.
Hope this helps!
Marked as helpful

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