Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive CSS

Łukasz 20

@Infect3d

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


On mobile version container won't stay at the center of the screen. Could You help me fix this ?

Community feedback

Travolgi 🍕 31,480

@denielden

Posted

Hi Łukasz, great job!

Adding main tag for Accessibility and remove -webkit-text-stroke-width: medium;

Try to remove all margin from container class and use flexbox to the body for center the card. Read here -> flex guide

Also set heigth of body to 100vh because Flexbox aligns to the size of the parent container.

Hope this help and happy coding :)

Marked as helpful

1

Łukasz 20

@Infect3d

Posted

Hello Daniel,

thank You for Your feedback, it was very helpful ! :)

1
P

@ccreusat

Posted

Hello ! Great job, you nailed it :)

To center an element in the viewport, I would suggest better day than using margin-top/padding-top with %;

Take a look at this link : here

Enjoy!

Marked as helpful

1

Łukasz 20

@Infect3d

Posted

@ccreusat Thank You so much for Your feedback!

0
Łukasz 20

@Infect3d

Posted

Ok, nevermind I have fixed that problem. But any feedback would be appreciated :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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