Submitted about 2 years ago

HTML and CSS

Abdulbasit Fasasi•190

@Kvngfax

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I found positioning and the sizing the image quite difficult.

Community feedback

Lucas 👾•104,400
@correlucasPosted about 2 years ago
👾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
@KvngfaxPosted about 2 years ago
@correlucas is the 100vh an example or it's a must
0
Adarsh Rai•560
@AdarshRai0Posted about 2 years ago
@Kvngfax it's must!
0
Lucas 👾•104,400
@correlucasPosted about 2 years ago
@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

@AdarshRai0Posted about 2 years ago

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">`

Abdulbasit Fasasi•190

@KvngfaxPosted about 2 years ago

@AdarshRai0 Thank you

Please log in to post a comment

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