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
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found

Submitted

Stats preview card component using BEM convention

@VittorioDL

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


I appreciate any suggestion to improve my code! Feel free to tell me what I could have done better. Creating the media query was a nightmare. When i reduced the screen size the image became smaller than the div with the "card" class. I didn't know how to resize the "card" based on the image size, so i created a media query at 1000px, in this way you can't see the image becoming smaller than the container

Community feedback

@SurajHadage

Posted

I have some suggestions. Next time making something like a single card component don't use a parent element as a container to center your main element. Instead give the properties to body element to center your main element like you have given to container. This will shorten your code. Use microsoft Paint app on your PC to get actual dimensions. Don't upload unnecessary files to github and save server space. This way you contribute for fight against climate change. Just upload images folder, index.html & style.css. And there is no problem with your image, when you change flex-direction this acts like this because flex basis does not work. Instead of using two div elements for changing image use <picture> element, If you do not know as beginner search and you will be pleased. Don't watch tutorials and read documentations and take a look at my profile. And afterall just raise some code.

Marked as helpful

0

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