Submitted about 2 years ago

QR Code

Barney• 370

@waikoo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@elaineleung

Posted about 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

Bhaskar Bordoloi• 140

@bhaskrr

Posted about 2 years ago

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

Marked as helpful

Mihirkumar hitendrabhai nayak• 180

@mihir2226

Posted about 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

Please log in to post a comment

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