Flexbox-gap-em&rem

Community feedback

• 

  AbdulMajeed•330

  @AbdelmigedPosted about 1 year ago

  Hello @introxiety, Congrats on completing this challenge hope it was fun.🎉🎉

  For CSS:

  You should aim to make your code DRY (Don't Repeat Yourself) by grouping elements that share same or some of the attributes together, or you can make Utility Classes which are basically one or more(usually one) CSS attributes and then assigning those classes to HTML elements.

  ex: instead of .div1{display: flex; justify-content: center; align-items: center;} .div2{display: flex; justify-content: center; align-items: center;} write like it .div1,.div2{display:flex; justify-content: center; align-items: center;}.

  Or you can use utility classes like .flex{display: flex} .justify-content-center{justify-content: center}; .align-items-center{align-items: center}; <div class="flex justify-content-center align-items-center"></div> <div class="flex justify-content-center align-items-center"></div this is the same as CSS frameworks as they are built on the notion of utility classes.

  You can organize your CSS attributes alphabetically .

  You can better organize your CSS code using Variables as they provide an easy to manipulate attribute value for elements that share the same attribute value.

  For media queries it is better to use PX as it is an absolute value and doesn't change relative to font-size such as EM or REM.

  Hope this was helpful and as always Happy Coding.😊

  Marked as helpful

  0

  ---

  

  P

  Carlito•210

  @IntroxietyPosted about 1 year ago

  @Abdelmiged I've come to realize that achieving what I need can be done similarly to how Bootstrap names its classes. Thank you for your assistance. I'd also like to explain why I've chosen to use em units within my media queries. I've just follow someone in this Discord thread (https://discord.com/channels/824970620529279006/1098309837907038260/threads/1143696778512826518)

  where point number 5 emphasizes the use of min-width media queries defined in rem or em rather than px. This practice is advocated when there's room for the layout to adapt as the screen size enlarges.

  1
• Account deleted

  Hi there!! Congrats on completing this challenge 🥳🥳🎉

  To resolve the error you can do the following:

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

  I hope I have been helpful

  Happy coding! ✌️🙃

  Marked as helpful

  0

  ---

  

  P

  Carlito•210

  @IntroxietyPosted about 1 year ago

  @FLCHRIS Thank you it's fixed.

  0