@Hassiai
Posted
Replace <div id="mainDiv"> with the main tag, <p id="p1"> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html
To center #mainDiv on the page using flexbox or grid instead of a 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.
To center #mainDiv on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
To center #mainDiv on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
For a responsive content replace the width in #mainDiv with max-width, increase the width for it to be equivalent to the width of the design. max-width:320px
.
Replace the height in #mainDiv with a padding value fo r all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding: 16px
Give the section a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.
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