Skip to content
OverviewSolutions
10
Comments
6
Oluwatobi
@Oluwatobi9034

All comments

  • James Soares Costa•20
    @DropperDEVSubmitted almost 2 years ago

    Centralize the section to center horizontally and vertically

    QR Code

    1
    Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    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
  • Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    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
  • Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    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
  • Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    Hi , your design looks good....but it seems you forgot to add the eye icon when you hover on the image...

    0
  • Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    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
  • Oluwatobi•160
    @Oluwatobi9034Posted almost 2 years ago

    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