Frontend Mentor | Responsive page using media queries coding challenge solution

@AdrianoEscarabote

Posted almost 2 years ago

Hi Nasyr Akhmadov, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

Flex-box:

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

GRID

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

The rest is great!

I hope it helps... 👍

Marked as helpful

Ahmed Hany• 220

@ahmedhanyh

Posted almost 2 years ago

Hey Nasyr Akhmadov! I hope you're well. Congratulations on completing your project!

To center the div container both vertically and horizontally, you will need to use one of two layout methods, either using flexbox or grid.

Resources to learn about flexbox:

Resources to learn about grid:

How to use them to center the container:

Using Flexbox: Change the display of the container's parent element (in this case the <body> element) to flex (so that all its children would become flex items on which you could apply flex properties), then you can use the space distribution and alignment properties, justify-content and align-items, to center the container like this:

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

Using Grid: In a similar manner, you can use CSS Grid to center the div container. Set the display property of the body to grid, then use the space distribution or alignment properties, justify-content (or justify-items) and align-content (or align-items) to center the container like in this CSS:

body {
  min-height: 100vh;
  display: grid;
  justify-content: center;  /* or justify-items: center; */
  align-content: center;  /* or align-items: center; */
}

You can also use the shorthand property place-content (or place-items) to set both properties at once, so the above code snippet would become shorter like so:

body {
  min-height: 100vh;
  display: grid;
  place-content: center;  /* place-items: center; */
}

In both cases we had to give the body a height, otherwise it would only be as high as its content.

Hope I've helped. I wish you the best with your FEM journey!

Marked as helpful

Nasyr Akhmadov• 170

@darrowv

Posted almost 2 years ago

@ahmedhanyh thank you for detailed answer. I wasn't sure about giving height in vh, so I couldn't use flex or grid to center it vertically. Now I will be more confident about it.

Naida Islam• 220

@naida1210

Posted almost 2 years ago

Hello Nasyr! How are you? There is a possible answer to your question: to center elements inside of the divs you may use flex .div { display: flex; justify-content: center; align-items:center; }

or .div { display: flex; flex-direction:column; justify-content: center; align-items:center; } I hope it helps. Good luck!

Marked as helpful

Responsive page using media queries

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community