All comments

• 

  Mohamed Essam•100

  @Mohamed33362Submitted about 2 years ago

  It was difficult to add the background image and put it on right places , i have tried css background but i couldn't make it right , so i put it on html tag and style there places by css , i don't know is that right or not please take a view on the code and tell me what mistakes i did

  

  Flex-Box and Grid system

  1

  50
  

  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