Skip to content
Submitted over 2 years ago

QR Code

Barney•370
@waikoo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have a small problem I'd like to ask your help with, because it seems like it happens on all the projects I'm working on. The development server's view that I get is not the same as when I make a live GitHub Page out of my solution. So I have to tinker around with the width.

Details: Leaving the card's width at 375px didn't make the text break like the way it is in the design. Changing it to 321px broke it correctly. However when I enabled the live page on GitHub, it was too narrow. Disabling the live page, changing the width to 350px, re-enabling the live page fixed the issue.

But how can it be that from VSCode's live server I'm getting a different view for the same width as compared with the GitHub Page? I used Brave to check the live GitHub Page and Chrome as the live server.

I also noticed that some of my uploaded designs look different when on GitHub as opposed to how I'm seeing it while developing. Do I really have to disable live page, make the adjustment blindly, enable it again, and see if it's like the design, or is there a better way around this? Should I use something like Vercel or Netlify instead of GitHub? Did you encounter this issue yourself?

Why could this be?

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Barney, I use GitHub pages as well, and I don't believe I have that issue as my uploaded designs usually are quite close to the original one. Have you tried using a CSS reset yet? There can be default settings and styles in each browser that's could be giving slightly different results. I normally use Andy Bell's CSS reset code, or you can also check out some of my projects in my repo; you should be able to see the CSS and then copy the code.

    Hope this helps, and good luck!

    Marked as helpful
    1
  • Bhaskar Bordoloi•140
    @bhaskrrPosted over 2 years ago

    I also used to have the same issue .Vercel solved it.

    Marked as helpful
    1
  • Mihirkumar hitendrabhai nayak•180
    @mihir2226Posted over 2 years ago

    just use the chrome inspect tool and do changes through it. if you are not comfortable with the live server. after you satisfy with the changes copy them and paste them into your code.

    it kind of works for me every time when I stuck. hope it will work for you too.

    Marked as helpful
    1

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