Flex-Box and Grid system

Community feedback

• 

  Emander•160

  @imunderwaterPosted about 2 years ago

  Hey There,
  I see that you have some issues in your code, you have to practice more to understand every line you write.

  • First of all, your code work for less than 1440px screens and that's wrong.
  • you have to select a height for the body element like body { min-height: 100vh} to take the full height of screen, don't set the body to body { height: 100%}, because the body element its the parent of all the elements.
  • and to center the page elements inside the body use display: flex; and the flex center properties.
  • the background image have to be set by the CSS not the HTML tags, you can set the position of each image like this:

    body {
      background-image: url(/bg-pattern-top-desktop.svg), url(/bg-pattern-bottom-desktop.svg);
      background-repeat: no-repeat;
      background-position: top left, bottom right;
      /* or */
      background-position: 0% 0%, 100% 100%;
    }
  

  • you have to set the direction of elements to column for medias that have less than 768px by flex-direction: column; or display: block;

  Hope I gave you some good advices.

  Enjoy with coding ❤

  Marked as helpful

  0