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

HTML/CSS Stats card component

Loïc2A 50

@Loic2A

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello ! Second challenge completed, I did this one faster than the first one (the product card), but I encountered more difficulties, especially on the responsive.

Several questions come to mind:

  • I have centered my card, setting my #main to 100vh, display: flex, justify-content: center and align-items: center. Is this the right solution (line 20 in my css file)?

  • I don't know if I've used the em units correctly for the font sizes, do you have any suggestions for this?

Thank you in advance for your precious advice!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @Loic2A, congratulations for your new solution!

I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

You can use this code shortcut to reach the same color of the challenge. All you need is to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

img {
mix-blend-mode: multiply;
Opacity

Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Loïc2A 50

@Loic2A

Posted

@correlucas Hello Lucas ! Thanks for your answer, I didn't know the mix-blend-mode, it's a nice trick ! Thanks for the extra info about Ids, I know it already, but bad habits die hard

Cheers

1
Lucas 👾 104,420

@correlucas

Posted

@Loic2A This is amazing Loïc2A! Then say me if worked in your code and if was useful to you. Have a nice day =)

0

@jvmdo

Posted

Hi, LOÏC2A. I'm learning the basics as well, but I think I help with your questions.

According to this MDN cookbook your centering technique is correct.

The font size is hard to guess by looking, but the styles guide provides the paragraph font (15px), then you guess the heading are bit greater.

Marked as helpful

0

Loïc2A 50

@Loic2A

Posted

@jvmdo Hello João ! I think it is the good solution too, but in mobile, I have un scroll bar which appears, so I think it's my 100vh not enought for all my elements + margin. I wil investigate it.

Cheers

1

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