Skip to content
Submitted over 3 years ago

Atom, CSS, HTML

Yukti•10
@yukti-singh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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

  • Sohail Jafri•350
    @thesohailjafriPosted over 3 years ago
    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
  • Heather Smith•220
    @sorengreyPosted over 3 years ago

    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

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