Design comparison
SolutionDesign
Community feedback
- @beowulf1958Posted 2 months ago
Great job on this challenge. Your desktop version looks good. However, when I try to view it on my iphone, it does not look right.
The problem is you chose to center the content with padding. This is not a good practice as it will look different on different browsers and screen sizes. It is good practice to use either display: grid or flexbox on the parent element. Then your web page will be responsive. Try this:
body { margin: 0; /* padding: 300px; */ background-color: burlywood; display: grid; place-content: center; } .content { max-width: 600px; background-color: white; padding: 0px 20px; font-family: "Outfit", sans-serif; margin: 10px; border-radius: 10px; }
(You may also have to set a width on the content.) Now everything looks right on smaller screens.
0
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