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 qr-code tempelate using margins and paddings

@iMohamed-E

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@emkuma

Posted

I would place the design in the middle of the viewport.

I'm just a newbie to css. Your css code looks "clean". Your code uses more sophisticated techniques than mine.

Good job!

Marked as helpful

1

@iMohamed-E

Posted

Yeah you can do that too but i wanted the text underneath it to bo close to it too , but ty <3@emkuma

0

@KapteynUniverse

Posted

@iMohamed-E For better centering, you can use flex or grid.

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

or

body {
display: grid;
place-content: center;
min-height: 100vh;
}

Try to avoid hard coded values like width: 350px; , use max-width: 350px; instead, max-width: 20 rem would be even better. Using em/rem units is better for responsiveness.

Images need meaningful alt texts, unless they are decorative. For this challenge, something like "Frontendmentor.io" or "QR code to Frontendmentor.io" would be better i believe.

Marked as helpful

1

@iMohamed-E

Posted

Ty so much , that was helpful and i will work on it <3 @KapteynUniverse

1

@ness505

Posted

Nice and simple solution

1

@iMohamed-E

Posted

Ty <3 @ness505

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