Responsive homepage using html, css and vanilla js only
Design comparison
Solution retrospective
Hi everybody. I have some problems with this project and I'd like if someone could point out what i did wrong. So... problem number:
-
The container below the navigation is off center and Ι don't know why or how to fix it.
-
When I open the menu (on a small window size), I would like it to not be able to scroll.
-
Is there a better way to put the "read more" button at the bottom of its container.
If you see something else that's wrong please tell me, it will help me a lot.
Community feedback
- @ApplePieGiraffePosted about 1 year ago
Hello there, Loukas Vovlas! 👋
Good job on this challenge! 👏
The reason the main content in your site appears slightly off center is because there is some extra gap being added to the right side of the grid of
div.two-columns
. To get rid of that, setgrid-column: 1 / span 2
ondiv.three-columns
(instead ofgrid-column: span 3
). Also, be sure remove thewidth
property fromdiv.small-box
so that it can fill up all of the space in its section of the grid containerTo prevent the page from scrolling when the mobile menu is open, you'll need to add
overflow: hidden
to thebody
when the menu is toggled. You can do that with a little JS (and remember to remove that style when the menu is closed so that users can scroll again)You could make the attribution always stick to the bottom of the screen with absolute positioning (but it may overlap the rest of the content at times), so instead you could turn the
body
into a flex container (make itflex-direction: column
) and addmargin-bottom: auto
tomain
. That will push the attribution to the bottom of thebody
if there is ever any extra spaceHope you find these suggestions helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful0@vovlaslPosted about 1 year ago@ApplePieGiraffe Thank you so much. Now it's working properly thanks to you :) I Didn't do the nav overflow yet but i'll do it tomorrow for sure. Thanks again :)
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