@DropperDEV
Submitted
Centralize the section to center horizontally and vertically
Oluwatobi
@Oluwatobi9034
All comments
- Oluwatobi• 160
@Oluwatobi9034
Posted
Okay. Nice solution by the way. You should change the height to min-height 100vh and set it on the body element on your css file. The same goes for the display flex property , you should set them on the body element also. This should help you center it perfectly.
And of course, you should move the attribution (footer) to the bottom in the body element in your html file. And also delete the text on top of the attribution also, it should only be inside the card.
And also , you should set the background color on the Body element!
Marked as helpful
1 - Barış Sev• 170
@Barissev
Submitted
I thought the stats are grid, it took my so much time to understand that it is flex (:
Oluwatobi• 160@Oluwatobi9034
Posted
Hello, congratulations on your solution. Yes, flexbox works. You can also use grid and even css float property. Of course which ever way you want to follow, is just fine. If you need more time with grid , you can look for css grid crash by Travsery Media course on YouTube.
0 @WilliamTheGreat
Submitted
Oluwatobi• 160@Oluwatobi9034
Posted
Congratulations on your finishing.... Just a few thoughts, the background color for this design is not white, you can check the style guide as I am not with my computer at the moment.... And also some margins to prevent the mobile design from touching the edges.
0- bradfwcoding• 70
@bradical25
Submitted
Oluwatobi• 160@Oluwatobi9034
Posted
Hi , your design looks good....but it seems you forgot to add the eye icon when you hover on the image...
0 - Gabriel Carlos• 210
@gabscarlos
Submitted
Oluwatobi• 160@Oluwatobi9034
Posted
Hi....here are a few ideas... You should always add a basic css reset before you write your code, this is because elements have their default margins and paddings. 2...you can remove the margin auto and set the card class to display flex first before trying to center it by flexbox. 3... You should set the width of the card to either 90 or 100%, set the max width property in px , say something between 300 to 375px , it should be more responsive and easy for you that way. You can also increase the border radius property as well. And also for the image as well. 4... You should always set images to a 100% width , there's no need for the padding auto, and the margin as well , you should consider Putting the image in a div , before adding a margin to it. Or you can just set a good amount of padding in the card itself. The align items center it's not needed. For the h2, text align center is okay, no need for the justify content center.... I hope this helps
Marked as helpful
0 @thgsnake
Submitted
I think I didn't create the rgba mask correctly and that's why it was unresponsive. I accept help ;)
Oluwatobi• 160@Oluwatobi9034
Posted
It is because you didn't add a media query, you should add a media query, (a max width of 716px or less ) so it can be responsive.
Marked as helpful
1
