Submitted over 1 year ago

QR code component solution

Oke Olaoluwa•20

@larexoo7

A solution to the QR code component challenge

Preview Code

Solution retrospective

Responsiveness

Try to understand how to make a page responsive, tried my best on this challenge. Must the viewport width for a larger screen be higher than that of the mobile screen or they are both 100% relative to the device?

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,790
@danielmrz-dev
Posted over 1 year ago
Hello @larexoo7!

You did a great job!

I have a quick tip for you to improve it:
- This project is not responsive, because the mobile and desktop version are the same. You're gonna have the opportunity to practice responsiveness more on the next projects.
- I noticed that you used margin to place the card closer to the middle of the page. Here's 2 different ways for you to center your card without using margins:
You can apply this to the body:
```
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
or you can apply this to the element you wanna center:
```
.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}
```
I hope it helps!

Other than that, my friend, great job!
Marked as helpful

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