Design comparison
Solution retrospective
Hello community, I've completed another frontend mentor , I had a challenging time making it.
I have a question about setting max-width
to body that the website doesn't stretch all on larger desktops (more than 1440px
) , and the design messes up.
Any suggestions about the accessibility?
Please share your thoughts !There’s still some more to do like the readme, cleaning up repeating code, and html warnings.
I'd appreciate any comments for improvements or anything I've missed. Thank you!
Community feedback
- @GrischKPosted over 2 years ago
Excellent job, it looks very similar to the original design and the responsive is nice.
Marked as helpful0 - @ChamuMutezvaPosted over 2 years ago
Greetings PhoenixDev22
- you asked about setting a max-width on the body, you don't need to do that as the body represents your viewport. You can have a wrapper div that will be the only child of the body containing all the other elements, you can then set the max-width on that container . eg
<body> <div class="container"> <header> header content here </header> <main>main content here </main> <footer>footer content here</footer> </div> </body> // css .container { max-width: 90rem; }
- there is an overflow of the content caused by the images , check on desktop. Add
overflow-x: hidden;
on the body element
Marked as helpful0@PhoenixDev22Posted over 2 years ago@ChamuMutezva Thanks a lot , I will take your suggestions on board .
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