Hey @echoturnbull 👋🏽. Congratulations on completing this challenge 🎉. You did good 👍🏾. A few things to note: html
- Your html document shouldn't contain more than one
bodyelement. So you should remove the
bodytag surrounding your
- There is really no need for you to wrap your
ptags in extra
divsor other wrappers. Since this challenge only contains an
pelements. Doing this will make your html a little bit more neat, and you don't have to write a whole lot of CSS. But the method you used is also perfectly fine since you could practice using classes 💪🏾.
To center the
container, you have to give a
min-height property to the body element because by default, block level elements have a height of 0 and only take the height of their children. The style definition for the
body element becomes:
min-height: 100vh; display: flex; justify-content: center; align-items: center;
And any other style you want to give the body.
- To make your image more responsive, there is no need to set a height and width property to it. This could cause layout issues later on. So the style definition for the image becomes:
display: block; width: 100%; object-fit: cover;
Should be enough.
margin: 0 auto 0 auto;from the
display: flexyou added to the
bodyselector will center the
mainelement horizontally and vertically.
Avoid using absolute values like
pxto for defining size or padding of elements. This could cause issues with accessibility.
There is no need to set
text-align: center;property you added to the
bodyelement would make sure that the elements are centered horizontally.
Sorry that got too long. You did really good 💪🏾. Once again, congrats on completing this challenge 🎉🎉
Marked as helpful