@ApplePieGiraffe
Posted
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, set grid-column: 1 / span 2 on div.three-columns (instead of grid-column: span 3). Also, be sure remove the width property from div.small-box so that it can fill up all of the space in its section of the grid container
To prevent the page from scrolling when the mobile menu is open, you'll need to add overflow: hidden to the body 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 it flex-direction: column) and add margin-bottom: auto to main. That will push the attribution to the bottom of the body if there is ever any extra space
Hope you find these suggestions helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
@vovlasl
Posted
@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 :)
@ApplePieGiraffe
Posted
@vovlasl
Glad to help! 👍
