Submitted about 4 years ago

Responsive Stats Card using HTML, CSS, and SASS

Adeel•55

@asab07

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

Hello Everyone,

Here is my attempt at the responsive stats card exercise. I am sure there is a lot to improve here, particularly in the style files. I think it could be done in plain CSS with fewer lines of code. Any suggestions would be welcome. Thanks.

A couple of questions:

What units you recommend for margin, padding, font-size, for such a project.
For this project, is it better to use background-image CSS property or <img> element in HTML?

Code

Please log in to post a comment

Community feedback

Adeel•55
@asab07
Posted about 4 years ago
Thanks for your response, Vanza. It appears that rem units are more predictable than em units.
Vanza Setia•27,715
@vanzasetia
Posted about 4 years ago
👋 Hi Adeel! My name is Vanza!

I am going to answer your questions:
1. I recommend to use rem units in any projects, since rem can let the user change their font-size. If you're using px, the user can't see any difference, which mean they can't control their font-size, based on their setting. For em, in some cases you can use it for padding and margin.
2. I would argue, that using background-image is much better. The reason for that is because, it much easier to create purple effect just by doing this:
```
.card__image {
  background-image: url('../images/image-header-mobile.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #aa5cdb;
  background-blend-mode: multiply;
  height: 14rem;
}
```
And then you can change the image into desktop version by adding media query. (also you can remove the img tag inside the card__image).

That's it! Hopefully these answers your questions!

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