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

Responsive Page

@abhishekrathaur80

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


Please provide feedback.

Community feedback

j0sephh123 140

@j0sephh123

Posted

Hi, looks good, few remarks.

  • You last rule doesn't seem to be working, because it is missing pixels after 395 @media screen and(max-width:395) {
  • Below 820px, the heading is way too close to the picture.
  • There is no space between 10k+ companies 314 templates and 12M+ queries on mobile.
  • Avoid styling the body
  • You have main and master branches. I suggest you pick only one of the two and delete the other one. This is because when someone opens the repository, sees only README.md and 2 .jpg files.
  • You should install Prettier - this is an extension for VSCode. It is used to format the code. You can format both .html and .css files by using "Ctrl + Shift + P" -> Format document with -> Prettier. Also you can activate the option to format on save in VSCode, which is located in Settings.
  • I see that you have various colors, you can look into using CSS variables instead of using the colors directly in your css rules.
  • The heading font-family seems to be Times New Roman instead of the expected Inter. I see that you have that rule, it is because you were missing comma here: "font-family: "Inter" sans-serif;"
  • Font-family seems correct for the paragraph

As a general suggestion, start styling for mobile device and then add styles for desktop. Try to use fewer breakpoints if possible.

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