Git, Gitflow, HTML/CSS, Flexbox, and Positioning

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  Hi @Have-Samuel 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • You could use the CSS backgrounds properties to set the background:

  body {
    background-color:  hsl(225deg, 100%, 94%);
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
  }
  

  The background property is shorthand for all the properties mentioned above:

  background: hsl(225deg, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;
  

  References:

  • .CSS background Property
  • Background property
  • Background-repeat (MDN)

  .

  • Centering the element with position would make your element behave strangely on some mobile devices. - There are two modern CSS techniques to center elements instead of using the position property:

  Using flexbox layout:

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

  Using grid layout:

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

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  0
• 

  Thiago Morais•420

  @thirrazPosted about 2 years ago

  Firstly, your solution is very good! My only tip is to use semantic HTML. That way you won't have multiple <div> in your code. This link may help you 😎👍

  • https://developer.mozilla.org/en-US/docs/Glossary/Semantics

  Marked as helpful

  0