Skip to content
Submitted over 1 year ago

Mobile-first-CSS-Grid

Matin Zafari•70
@MachineCode0101
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

Centering the div vertically was unironically the most difficult part, and I still haven't managed it! so I did some hacks using "padding-top:30%" to have some space to the top of the screen/page. I did try grid and flex, with content, align and item properties to center my content but I just couldn't get it centered vertically!

How can I improve the centering of the content?

Community feedback

  • Shahjahan Sarfraz•270
    @Jahan-ShahPosted over 1 year ago

    Hi Matin 👋. Weldone on solving the challenge, however, I'm here to answer your question on centering a div.

    Let's say we have the following HTML:

    <div class="parent">
<div class="child">Some Content</div>
</div>

    Let's talk about centering the div in CSS: There are three commonly used ways we can use to center a div in CSS, you can use whichever method that's suitable.

    -1st:

    .parent {
position: absolute;
top: 50%; //centers the child div vertically
left: 50%; // centers the child div horizontally
transform: translate(-50%, -50%); //first value for x-axis translation and second for y-axis
}

    -2nd:

    .parent {
display: flex;
justify-content: center; //centers child div horizontally
align-items: center; //centers child div vertically
margin-inline: auto; //you can use this too instead of justify-content
}

    you can read more about Flexbox here.

    -3rd:

    .parent {
display: grid;
place-items: center; // centers div both vertically and horizontally in grid;
}

    you can read more about Grid here.

    Note: there are a lot of ways to center a div, but you can use these three to get your work done easily. But if you are curious to find other ways too you can search for them on the Internet.

    I hope you find this helpful 😄

    Marked as helpful
    1
    Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    @Jahan-Shah Thank you Jahan for the clear and multiple ways of solving the problem! They all were helpful!

    0
  • Devon Daniels•160
    @DevDan21Posted over 1 year ago

    Hi Matin

    CSS>body - I would remove the following:

    place items: center; padding-top: 30%;

    and add the following:

    justify-content: center; align-items: center; min-height: 100vh;

    So that it looks like the below:

    body { display: grid; justify-content: center; align-items: center; min-height: 100vh; text-align: center; font-family: "Outfit", sans-serif; background-color: hsl(212, 45%, 89%); }

    Hope this helps buddy!

    Marked as helpful
    1
    Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    @DevDan21 Thank you Devon for showing exactly how to solve this dang problem man! I appreciate your time!

    0
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezRPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you.

    • In order to fix the landmark warning, wrap everything in a <main> tag, for now.
    • You could create a new structure in order to center the card component, something like this:
    <body>
<main>
<div class="card">
</div>
</main>
</body>

    In this case you could use the <main> element to center the div.card component, this css could do the trick

    main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 1.75rem; /* 28px */
}
    • The 100vh ensure that the <main> height is as tall as the screen
    • The flex container could center it children with justify-content: center;, and align-items: center;
    • The padding is to prevent the .card to hit the sides of the screen
    • You could replace the <container> tag for a <div> and set a padding to it, in order to preserve the inner white space.
    .card {
padding: 16px 16px 32px 16px;
}

    I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
    1
    Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    @AGutierrezR Thank you Andrés for the valuable tips, I appreciate the detailed explanation of your answers and helping me solve the warnings as well! The code you suggested was clean, easy to copy, detailed, truly professional! The "padding 16 px" part adds more padding than we want in this case and is not necessary.

    0

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