Design comparison
Solution retrospective
I had a problem with the "footer" section I couldn`t align it at the bottom of the page
All the feedbacks are welcome :)
Community feedback
- @correlucasPosted about 2 years ago
πΎHello again Ash, congratulations for your new solution!
You've some issues because the content is not vertically aligned, you need to change some properties in the body to fix it. Use this to align the whole content vertically
display: flex; / min-height: 100vh;
body { display: flex; min-height: 100vh; padding: 20px; background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg); background-position: left -17rem top 0, bottom 0rem left 27rem; background-repeat: no-repeat; background-size: 70%; mix-blend-mode: multiply; z-index: -3; align-items: center; justify-content: center; }
π I hope this helps you and happy coding!
Marked as helpful0@ASH2001princePosted about 2 years ago@correlucas wow it`s much more better brother you are a life saver did you know that :)
1@correlucasPosted about 2 years ago@ASH2001prince happy to hear that Ash, keep it up π
Marked as helpful0 - @DavidMorgadePosted about 2 years ago
Hello man, congrats on finishing the challenge! the UI looks pretty good!
To center your footer tag try using flex-box like this:
.attribution { display: flex; justify-content: center; margin-top: 10rem; }
Don't forget to uncomment your html, if you want it to work for mobile sizes to, on your media querie for the body you will just have to add
flex-direction: column
and it will position your footer at the bottom on mobile screen sizes too!Hope my feedback helps you for future projects!
Marked as helpful0@DavidMorgadePosted about 2 years ago@ASH2001prince I did a pull request to your repository, check it out an see if it works with the changes!
Marked as helpful0@ASH2001princePosted about 2 years ago@DavidMorgade dude that was amazing I add the flex and justifyed it to the center before but I didn`t put the margin that was a great move thank you very much.
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