Responsive page

Hi uyiplay44,

Nice work there!

To make your card appear at center you can use a wrapper of height 100vh and width 100vw, then use flex like this:

.wrapper {
  display: flex;
  height: 100vh;
  width: 100vw
  align-items: center;
  justify-content: center;
}

You may use grid with single column too if you want.

Other than that, I noticed you used just one p tag for the whole text. This is not good, try using an h1 or preferably h2 tag for heading and p for other.

Hello uyiplay44,

Congrats on completing your first challenge!

Regarding the centering of the image, you don't need to centre it, just use max-width: 100%; for the image, other than that you don't need to use any other sizing properties for it. Try putting some padding inside the card, that'll make it a little bit better looking, like the design.

I have few suggestions:

• There is only one card here, so there is no need of grid here.
• You don't need to apply the properties width, padding and margin to the body, instead you can apply it for the container inside it.
• Try to code the design for mobile screens first and then go for bigger screens using media queries(using min-width property).

Happy coding and good luck to your next projects!