Frontend Mentor | Emander's profile

@Mohamed33362

Submitted almost 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

Emander• 160

@imunderwater

Posted almost 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

Emander

All comments

Flex-Box and Grid system