Qr Code Challenge

Hi Straw congrats on completing the challenge but I think you have a miss understanding with media queries and how responsive design works. So basically I saw your media query and you set min-width to 1440px, we all know that majority of designs in frontendmentor are meant for desktop devices with 1440px but your media query has a wrong approach I recommend you to search how to set 2 breakpoints in a media query and also take a look on how they work.

Also when making a web design remember to use the developer tools and use the device toolbar and resize your web design and see how it behaves in other devices so you can think of the approach you are going to take for the media queries.

Hello StrawHatCoder. Congratulations on your first project! It looks wonderful on the whole. Just some little tips:

I tried using the Responsive tool on my Chrome Dev Tools and at width: 1440px, your solution becomes very much magnified that it loses it's form. You might want to look at your media query code @media screen and (min-width: 1440px) and change the min-width to max-width.

Hope this helps you. Happy Coding!💖

👾Hi @StrawHatTeamIt, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.

REMOVE THE MARGINS

main {
    padding: 1em;
    /* margin-top: 8%; */
    /* margin-left: 40%; */
    width: 300px;
    background-color: white;
}

The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center.

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

✌️ I hope this helps you and happy coding!