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-main

@OctaviusFarrel

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


Tips on using media query effectively ?

Community feedback

Fidel Lim 2,775

@fidellim

Posted

Hi @OKUTAJAGER,

Great work finishing the project! Just one suggestion, you might want to adjust the breakpoint of your media query. If you inspect your site and adjust the screen width, at some point the component will keep shrinking until the image is not seen.

I hope it helps :)

1

@MarlonPassos-git

Posted

Good job Okuta, some suggestions

-I would add this to the image so that the person doesn't get cropped on some screen sizes.

.image-container > div {
     background-position: bottom;
}
  • I would put the page breaks to 750px so the image doesn't get so shrunk

-stat-container could be a <ul> and <li> on items

  • It would generate a new screenshot because this one gave some error

  • Add a content margin to the side so it doesn't stick

  • My tip about media is the following: I take the site and keep changing the screen size, when I see that a content is strange in so many pixels I take this value and put it in my media queries

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