Submitted over 1 year ago

Mobile-first-CSS-Grid

Matin Zafari• 70

@MachineCode0101

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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-Shah

Posted 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

Matin Zafari• 70

@MachineCode0101

Posted over 1 year ago

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

Devon Daniels• 160

@DevDan21

Posted 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

Matin Zafari• 70

@MachineCode0101

Posted over 1 year ago

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

Andrés Gutiérrez Ramírez• 2,510

@AGutierrezR

Posted 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

Matin Zafari• 70

@MachineCode0101

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

Please log in to post a comment

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