Skip to content
Submitted almost 2 years ago

Responsive page using media queries

Nasyr Akhmadov•170
@darrowv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted 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
    1
  • Ahmed Hany•220
    @ahmedhanyhPosted 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:

    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
    1
    Nasyr Akhmadov•170
    @darrowvPosted 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.

    1
  • Naida Islam•220
    @naida1210Posted 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
    1

Please log in to post a comment

Log in with GitHub

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