Skip to content
Submitted over 3 years ago

Responsive Stats Card using HTML, CSS, and SASS

Adeel•55
@asab07
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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:

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

Community feedback

  • Adeel•55
    @asab07Posted over 3 years ago

    Thanks for your response, Vanza. It appears that rem units are more predictable than em units.

    0
  • Vanza Setia•27,775
    @vanzasetiaPosted over 3 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!

    0

Please log in to post a comment

Log in with GitHub

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