Single section Lading page 100% responsive using Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Nicolas, congratulations for your new challenge solution!

  I'm with your solution open and I've some tips for your:

  1. Fix the background. You background is repeating and you can avoid this behavior setting background-repeat: no-repeat; but to have a better fit for this challenge, you can use background-size: cover; to keep all the background inside the body without repeating.

  2. You need to set height: 100vh; in order to have the body displaying 100% of the viewport and align all the content properly with flexbox see the properties below:

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

  About your question of the header, I think you can insert the header inside the main because I guess you're thinking about doing that to align it with the other content wrapping everything inside the <main> tag right? I don't think there's problems since there's no additional content and the header is only the logo.

  I did this same challenge days ago so if you want to use it as a reference you can check it here: https://www.frontendmentor.io/solutions/huddle-lp-section-vanilla-css-logo-animation-easter-egg-bem-meb3nl6zF8

  Overall I think you've a done a good work, there's only some minor issues to fix, congratulations and happy coding!

  Marked as helpful

  1

  ---

  

  Nicolas•250

  @nicolas055Posted over 2 years ago

  Hello Lucas! Thanks for your feedback!

  I just fixed the background and body issues you mentioned!

  I was looking at your coding and I noticed that it is very clean and readable, can you tell me where and how you learned these techniques?

  0