@koyaboy
Latest comments
- @iceberg61
First ** CONGRATS 🎊 ON** completing the challenge. For your first question.
-
It really depends on you. If you have interest in sass ,you should definitely go for it. Oh and for this project, sass is not necessary for it ** my opinion* *
-
CSS Grid is for layout; Flexbox is for alignment. CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox. With CSS Grid, you can align components into columns and rows. This feature makes it ideal for larger layouts that must be divided into sections. In other words, this type of layout will have elements that need to overlap and layer rather than being linear. Flexbox With Flexbox, you can lay out and align elements in a container even if you don’t know the size of those elements or if the size might change. That’s because a flex container is, well, flexible: it expands the flex elements to fill space when it’s available and shrinks them to prevent overflow when it’s not.
-
If I understand correctly, you are saying that the content is centered horizontally by default, but that the body needs a height: 100vh to center the content vertically.
body are block elements, which means that, by default:
They take up the entire width of the screen They only take up as much height as is needed to display their content (they have a default height of auto). If your div is a flexbox with the content centered, even if the content is centered vertically, the div will still only expand downwards as far as it needs in order to fit the tallest element inside of it. Since the div is still at the top of the screen, even if its content is centered vertically inside the div, the content will appear at the top of the screen because the div is only as tall as the content and because the div is at the top of the screen.
However, the height: auto default property of body can be overridden. If you set the height to 100vh, you force the div to be 100vh of the height of its parent element, the page. The div would then have a bunch of extra space for the content, and due to the flex rule, it would position the content in the vertical center of that extra space.
Marked as helpful -
- @verillyh@iceberg61
Well when i was creating this project. CSS grid was very difficult at first but i knew it was the best way to get this layout. so yes for desktop view, It best you use GRID and for mobile use FLEXBOX.
Also your workflow sure look nice👍😁 CONGRATULATIONS on completing the challenge.
- @Dikachi-Scorpio@iceberg61
On your css file. while this👇 works to a certain degree. section{ display: flex; flex-direction: column; align-items: center; }
but in order for section to be positioned at the center. this should work properly. i set height to section because it align-items center won't center😂 until it is giving a height section { display: flex; align-items: center; justify-content: center; height: 100vh; }
- @kayyrbeks@iceberg61
Definitely Using relative units in image size and border-radius helps your design remain responsive on any sceen sizes
- @yori21@iceberg61
Hello there,
The design looks awesome and congrats on completing the same. Let keep growing 🚀
- @marcosfil@iceberg61
Hello there,
The design looks awesome and congrats on completing the same.
