Design comparison
Community feedback
- @HassiaiPosted almost 2 years ago
Give the header, the main and the footer
max-width:1440px; width:80%; margin: 0 auto;
for the left-side and right-side space of the design.Give main>img a max-width of 100% instead of a fixed width value Give the header a padding-top and bottom value increase it to 2rem.
In the media query, add grid-template-columns:1fr 1fr and remove place-content: center from the main. give . text-area a padding-top value.
Hope am helpful. Happy coding
Marked as helpful0 - @Aikaykalu17Posted almost 2 years ago
-All SVGs should be aria-hidden <img src="logo.svg" alt="" aria-hidden="true"> -Your CSS sheet should be "style.css" and not "loadingpage.css"
-The reason for margin:0 auto; is to balance the entire page to the centre of the screen -For margin:0 auto; to work, you need to give your body a max-width For instance body { max-width:1440px; margin:0 auto; min-height:100vh; } -main { display: flex; margin-top: 1rem; gap: 1.2rem; width:100 % height:100% justify-content:center; align-items:center;}
1
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