@jonathan401
Posted
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
body
element. So you should remove thebody
tag surrounding yourh1
element. - There is really no need for you to wrap your
h1
,p
tags in extradivs
or other wrappers. Since this challenge only contains animage
,h1
andp
elements. 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 πͺπΎ.
CSS
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.
-
remove the
margin: 0 auto 0 auto;
from themain
selector. Thedisplay: flex
you added to thebody
selector will center themain
element horizontally and vertically. -
Avoid using absolute values like
px
to for defining size or padding of elements. This could cause issues with accessibility. -
There is no need to set
width
toh1
andp
tags, thetext-align: center;
property you added to thebody
element 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
@echoturnbull
Posted
@jonathan401 thanks for taking the time and effort to review and explain those things for me. Should make the next challenge go a little easier and look a bit tidier.
@jonathan401
Posted
@echoturnbull you're welcome π