Design comparison
SolutionDesign
Community feedback
- @HassiaiPosted over 1 year ago
Replace <div> with the main tag to make the content/page accessible. click here for more on web-accessibility and semantic html
To center the div on the page using flexbox, add min-height: 100vh to the body.
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
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.
For a responsive content,
- Give the div a fixed max-width value and a padding value for all the sides
max-width: 320px which is 20rem/em padding:16px which is 1rem/em
- Give the img a max-width of 100% and a border-radius value, the rest are not needed.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0 - Give the div a fixed max-width value and a padding value for all the sides
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord