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

Stats preview card component

@SamuMilla

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, I coded the site with a 50% of zoom in the bowser. Whe you see the live website in 100% zoom, is broken, but if you change it to 90% everything is ok...How can I fix that? Any suggestion will be kindly appreciated, thanks!

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Zooming out, the desktop layout is good and the mobile state is fine as well. Though resizing, the container is really really huge. It will be really awesome if you adjust the breakpoint for the mobile layout.

Regarding your query. Well just to fix this, just try to refactor it using 100% of the browser and not zoomed out. Since you zoomed out right, everything looks good but the given width and height of the browser is different. Seeing you breakpoint, it is declared 1440px which is bigger than most user who uses 1366x width screen. Oh yes, just try to lower it down will do the trick, maybe about 1000px or so, changing the min-width.

In terms of markup, yours is really clean and no extra elements, points for that one:>

Overall, really good work but as mentioned, lower down your breakpoint to fix the problem okay^^

1

@SamuMilla

Posted

@pikamart I'll try that. Thanks for taking the time to review the code and give valuable suggestions, I really appreciate it and will apply those changes.

0

@memerald

Posted

Hello Samuel

I noticed a small mistake which was the border radius of the image. You have change the top-left border radius instead of the bottom-right.

Also I would suggest making the entire card a bit smaller as you can see the image starts to pixelate when you open the live site. The site isn't broken as you say. Everything works fine in mobile and desktop both. Other than that, well done on this. Everything looks and works fine

Kudos Lakshya Bhatia

1

@SamuMilla

Posted

@Memerald nice, I will apply those changes. BTW, thanks for taking the time to reviewing the code and giving suggestions, I really appreciate it.

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