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

HTML and CSS

Abdulbasit Fasasiโ€ข 190

@Kvngfax

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 found positioning and the sizing the image quite difficult.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello, congratulations for your solution!

I saw your solution and everything is really good and its also responsive, you've missed only one property to add in the body in order to align the container to the screen center, note that the container will align to the parent element, thats the body in this case, so you need to give its height to align, giving min-heigh: 100vh you make sure that the container aligns to the center height.

See the code below:

body {
    min-height: 100vh;
}

Hope it helps and happy coding!

0

Abdulbasit Fasasiโ€ข 190

@Kvngfax

Posted

@correlucas is the 100vh an example or it's a must

0
Adarsh Raiโ€ข 560

@AdarshRai0

Posted

@Kvngfax it's must!

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

@Kvngfax a must because this will make the body display 100% of the viewport height, but this I'm saying if you're aligning using flexbox, there's people that align using position: relative and margin: 0 auto but I dont like these methods.

0
Adarsh Raiโ€ข 560

@AdarshRai0

Posted

Hello Abdulbasit Fasasi, congratulations for your solution!

If you want to improve your solution a bit I've two advice for your: Semantic tags

The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.

For example,

  <header>
    ...header of the webpage...
  </header>
  
  <main>
    ...main content of the webpage...
  </main>
  
  <footer>
    ...footer of the webpage...
  </footer>
</body>```  

        
 
 Always add the "!DOCTYPE"

HTML Language

`<html lang="en">`
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