@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
Unfortunately, there is no way to obtain exact values such as width and padding of the component unless you become a PRO member and have access to the designs on Figma.
However, you can still refer to the style-guide.md and use a browser extension called "PerfectPixel" to try to make it as close as possible.
HTML 🏷️:
- Wrap the page's whole main content in the
<main>tag.
CSS 🎨:
-
Avoid using
position: absoluteto center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
@yaseenomeira
Posted
@MelvinAguilar Thanks for the info! I started looking into centering a div using flexbox but an issue i run into is that the div itself isnt moving, only the children of the div. How do i stop this?
@MelvinAguilar
Posted
@yaseenomeira Hi!!!
If you want to center a div using flexbox, you should apply the display: flex property to the parent div, If you use flexbox on the component itself, the component won't be centered because it is considered the parent element that provides the flex layout context for its child elements.
In summary, flexbox is not like position: absolute, it is used on the parent container and not on the child.
And who is the parent element of the <div class="card">? Well, it's the <body> tag.
body {
background-color: var(--Light-blue);
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
I didn't notice before, you should use a CSS reset, if you notice I used margin: 0 on the body, if you remove it, you will create a scrollbar, that margin I removed is a default margin of the body element, and a common way to remove it is to use a CSS reset.
@yaseenomeira
Posted
@MelvinAguilar Hey again...
I tried to do what you asked but the only problem I have is that it will not align vertically Here is my code:
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card{
height: 200px;
width: 200px;
background-color: aqua;
}
the box keeps aligning at the top and not the center
EDIT: y'know what.. I'll just use position: absolute; in my project instead
@MelvinAguilar
Posted
@yaseenomeira Hi!
To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.: body { min-height: 100vh; }
@yaseenomeira
Posted
@MelvinAguilar omg thank you so muchhhhh
