Submitted over 2 years ago

Responsive page using media queries

Nasyr Akhmadov•170

@darrowv

A solution to the QR code component challenge

Preview Code

Solution retrospective

Can you suggest me good way to center vertically this type of divs? I just used margin to make illusion of centering.

Code

Please log in to post a comment

Community feedback

Adriano•42,890
@AdrianoEscarabote
Posted over 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 over 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:
1. MDN's flexbox layout guide
2. web.dev's flexbox layout module
Resources to learn about grid:
1. MDN's grid layout guide
2. web.dev's grid layout module
How to use them to center the container:
1. 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;
}
```
1. 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
Naida Islam•220
@naida1210
Posted over 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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord