@Hassiai
Posted
Replace <div class="box-2"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
There is no need to style box-2, give the background-color you gave to .box-2 to the body.
To center .box-1 on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
For a responsive content, replace the width in .box-1 with max-width and give the img a max-width of 100%.
Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding:16px
.
Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@Feithers
Posted
@Hassiai Hey there! Thanks for the help, I tried to fix it, I still have a few specific questions now that i'll copy/paste from the questions above. 1- What does exactly the "min-height" do? I know that it's purpose is to put it on the middle of the page, but isn't that the job of the "align-items" property? Also what exactly is "hv" on "100hv". What kind of measurement is that? 2- The solution I gave still has the words in a different size than the challenge, even tho I've used the exactly same font size and weight, why is that?
Thanks!