Skip to content
Submitted about 2 months ago

QR-Code-Component

CptnRedbeard•40
@CptnRedbeard
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

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

I was able to make an example similar to the original but it didn't adjust correctly when the window was resized. I'd try to find a solution without watching a video next time.

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

In my original file, when you resized the window everything would get squished because I was using percentages. I was able to follow along with a video explaining pixels, rem, and padding that helped out a lot.

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

How do you decide when to use pixels, rem, or percentages?

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted about 2 months ago

    It looks like your Repository is set to private 🔏 so we are unable to provide some feedback on your code, You can change this following these steps,

    1. Open up your repository on Github, ✅
    2. Click on settings on the top nav bar, ✅
    3. Scroll down to the bottom, ✅
    4. In the red box you will see change repository visibility ✅
    5. Click on on Change visibility and select public. ✅

    Once you have done this your GitHub link should be viewable by everyone here on Frontend Mentor.

    Marked as helpful
    0
  • glowri57•130
    @glowri57Posted about 2 months ago

    Hi @CptnRedbeard

    To answer your question, you should use px when dealing with properties that you want to remain fixed in value no matter the viewport. you can use px with properties like: border, border-radius, etc.

    rem and percentages are relative values.

    rem is used with properties like font-size, margin, padding, @mediaquery min-width and max-width values.

    percentages are mostly used in width, height, min-width, max-width, min-height and max-height properties. They are relative to the width or height of the webpage. Check this article to understand more. Why font size must NEVER be in pixels

    I hope you found this helpful!

    0
  • Thomas-Ngo-1•90
    @Thomas-Ngo-1Posted about 2 months ago

    Your solution looks very nice, if you can adjust the Content to stay in the center it would be perfect. Cheers ^^.

    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