@danielmrz-dev
Posted
Hello, @Omer-KISAKOL!
Your project is looking good!
I'd like to suggest a way to make it even better:
- Your project is not completely centered.
Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:
📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
- Also, you could've wrapped the whole thing with
<main>and tried using grid to place the elements correctly. Using flex is not the best for this case.
When you find yourself questioning about using flex or grid, consider this:
📌 Use flexbox when you need a one-dimensional layout (either in a row or a column), such as navigation menus or arranging items within a container.
📌Use CSS grid when you need a two-dimensional layout with rows and columns, like organizing content in a grid-like structure or creating complex layouts.
In simple terms, use flexbox for simpler, linear layouts and CSS grid for more complex, grid-based layouts.
I hope you find this helpful!
Keep up the excellent work!
Marked as helpful
