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, mobile first

abdullah 60

@fullstackdeveloper3

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


Help me guys to do it right.

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @fullstackdeveloper3 👋🏻

I have some suggestion for the layout of the project and some other minor things.

  • Frankly, I'm not sure what this is data-lt-installed="true" and Google didn't have any useful answer, but I think that line is causing an accessibility issue, try removing it and generating a new report to see if the issue goes away.
  • For the layout, I'd suggest giving .component width: 100%; and .container width: 80%;. On mobile size, the image overlay height: 99%; it should be 100%. Also, for the .numbers, I suggest removing justify-content: space-between; and changing margin-right on spans to this margin-right: 90px;

I hope this was helpful 👨🏻‍💻 you did a great job by making it responsive, those suggestions will make the desktop version to look more like the original design. Cheers 👾

Marked as helpful

2

abdullah 60

@fullstackdeveloper3

Posted

@kens-visuals thanks for all these advise, but about the justify-content: space-between; I replaced it with margin-right: 90px; and it didn't look good so I return to the justify-content: space-between, thank you a lot bro cause you help me always.

0
P
Ken 4,915

@kens-visuals

Posted

@fullstackdeveloper3 no worries bro. No pressure, If you like the way it is, don't listen to anybody, that's your project and before anyone else you have to like what you've created so keep it up ✌🏻

Marked as helpful

1
abdullah 60

@fullstackdeveloper3

Posted

@kens-visuals thanks master.

0
Matthew 20

@Krisix12

Posted

You linked the mobile photo to desktop. Have to do it responsive so with css change the desktop photo to the mobile.

Marked as helpful

1

abdullah 60

@fullstackdeveloper3

Posted

@Krisix12 thanks man, I didn't realize that

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