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

first challenge using flexbox

Mari 555

@ChurrinChurron

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 don't know why it looks bigger than normal, I mean, when I change the browser zoom to 67%-75% it looks like I would really like it to look, but with the normal zoom it looks gigantic.

I know I need to learn more about the measurements, but if you know what the problem is here, let me know.

Community feedback

Tommy 30

@tommymaher15

Posted

Looks great!

Did you use the Figma design to find the measurements for this?

Setting a max width based on the element size on there would do the trick.

I find working with figma can be tricky and its an ever learning process for me personally at least.

Keep it up!

2

Mari 555

@ChurrinChurron

Posted

Hi!

No, I don't use Figma. I will try to use css grid or play with the measurements to see if I can fix that problem.

Thanks a lot for the advice!

1
P
tediko 6,680

@tediko

Posted

Hello, Mari! 👋

Good job on this challenge! What I can suggest to change is:

  • Since you're familiar with Flexbox try to center your .box container with that. Either wrap your .box div with another wrapper or apply these styles to body:
display: flex;
justify-content: center;
align-items: center;
  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • Read about media-queries to make your website accessible both on mobile and desktop resolutions. Now your solution only look good on 375px and desktop, nothing between.

Good luck with that, have fun coding! 💪

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