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
Request path contains unescaped characters
Not Found

Submitted

Desktop solution using vanilla html and css

Askell 60

@AliAbuSalam

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


I'd like to know if there's a better way to center the card element rather than using flexbox

Community feedback

@Abdelrahman0Khaled

Posted

Congratulations on completing this challenge👌❤️, here are some tips to make it look better. to center with out flexbox you can use

.contaner {
position: relative;
transform: translate(- 50%,  - 50%);
}

and you need to use fonts in style-guide file, and you need to make border-radius like

card{
border-radius: 15px;
}

and you don't need to border color and Congratulations again ,keep coding bro❤️😊 EDITED bro❤️

Marked as helpful

1

Askell 60

@AliAbuSalam

Posted

@Abdelrahman0Khaled Thank you! I somehow forgot to change the font. It's fixed now. Regarding your suggestion, can you explain this part:

transform: translate(calc(50% - 50%), calc(50% - 50%));

why is it calc(50% - 50%)? wouldn't it just equal to zero? which in turn changes nothing.

0

@Abdelrahman0Khaled

Posted

@AliAbuSalam it's my pad bro, its edited to

.contaner {
position: relative;
transform: translate(- 50%,  - 50%);
}
0

@bramizdev

Posted

I'm not sure if this is the best way for center your content for these challenges but while solving one of these challenges, Kevin Powell (a great Youtuber who teaches CSS and web development in general), used display: grid in the body selector. Since then I usually use that to center my Frontendmentor challenges. This works if your body is covers 100% of the height.

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

source: https://youtu.be/B2WL6KkqhLQ?t=1652

Marked as helpful

1

Askell 60

@AliAbuSalam

Posted

@bramizdev Thank you for the suggestion. I also know this website from Kevin Powell, haha.

1

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