Skip to content
Submitted about 1 month ago

Responsive QR Code Component

pure-css
Twilight Silver•120
@twilight-silver
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of the fact i was able to do everything with pure css and that i didn't have to use media port for the responsiveness...

What challenges did you encounter, and how did you overcome them?

The challenge i encountered was how differently the pages rendered on github are compared to what you would see yourself through live server...

I had to use inspect on a github rendered site to make the changes

What specific areas of your project would you like help with?

How to probably make sites in a way github pages wouldnt change If you get what i mean

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    Yes — this is a common issue! On Live Server, your computer runs the project in a more forgiving way. But GitHub Pages is stricter because:

    • It uses a real web server (with HTTPS), so things like incorrect file paths or folder names can break the design.
    • It is case-sensitive — for example, Images/photo.png will not load if the actual folder is images/.
    • It does not always refresh the latest version — sometimes you need to clear cache or hard reload (Ctrl + Shift + R).
    • If your CSS or images don’t load, GitHub might be looking in the wrong folder (especially if paths like /images/... are used instead of ./images/...).

    How to make sure GitHub Pages shows it exactly like Live Server:

    • ✅ Use relative paths for CSS and images like ./style.css or ./images/photo.png.
    • ✅ Keep your HTML, CSS, and images in the same folder (or double-check your folders and file names).
    • ✅ When in doubt, copy your CSS into a <style> tag in your HTML — that avoids linking issues.
    • ✅ Avoid using / at the start of image paths — that points to the root of the domain, not your project folder.
    • ✅ Use GitHub's own link to view the live site — don’t rely on previews alone.

    Bonus Tip: If you created a CNAME file, that’s for setting a custom domain. If you’re using it, make sure your domain DNS is set correctly — or remove the CNAME for now to avoid confusion while testing.

    If you're still unsure or want help with GitHub Pages setup or deployment, feel free to ask — happy to guide you step-by-step!

    Additional tips:

    • Consider using semantic HTML tags like <section> or <article> for your card instead of generic <div>s.
    • To improve accessibility, add descriptive alt text for images instead of using background images.
    • Try to avoid fixed widths in vw without minimum pixel sizes to ensure usability on very small or very large screens.

    Keep practicing, you’re making excellent progress!

  • Julio Garcia•270
    @julioedi

    Good one, remember to remove missing assets, you got style.css link at<head/> tag.

    Responsive @media is missing for a responsive part.

    For the next projects, you can use:

    *{
  box-sizing: border-box;
}

    That's for options like padding, are include inside of the containers size

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