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

Atom, CSS, HTML

Yukti 10

@yukti-singh

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


When I open the code locally on my system everything works fine, but when I uploaded the code from GitHub all the elements gets messed up. Any suggestions how can I solve this?

Community feedback

@thesohailjafri

Posted

  1. Add google fonts link in head tag (https://fonts.google.com/) example for Poppins font:
<head> ... ... <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" </head>

and add font-family in root CSS accordingly example: *{ font-family : Poppins, Arial; }

2)To remove the horizontal scroll bar from the bottom add overflow : ''none" to the body tag.

I hope this fixes the issue you're facing after deploying. Have a good day

Marked as helpful

1

@sorengrey

Posted

I had this same problem until I realized you absolutely have to use Inspect and develop your site at the specified widths, 1440 and 375. That's the width Frontend Mentor is going to view your work on, which can cause things to move out of place even if they look great on your screen. I learned the hard way.

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