Design comparison
Solution retrospective
well, i found difficulty in hovering equilibrium image over another image and learnt a lot from this challenge. any suggestions and comments kindly welcome.
Community feedback
- @tbensheimerPosted over 2 years ago
Hello and congrats on finishing this project! It looks great and very similar!
One thing to suggest is add a width of 100% to the main with the container class and also add a height of 100vh (viewport height) as well. This will allow you to cover the whole page with the dark background with no white background occurring. Doing this will also help you center the container to the middle of the page if you use flexbox. Adding justify-content: center and align-items: center to the main should center the panel. (I would recommend learning the difference between using content or items in flexbox) Keep in mind that once you center your panel, you may need to readjust your icon hovering the image since the position is absolute.
This project is a great accomplishment, keep up the good work!
Marked as helpful0@jeevitha1123Posted over 2 years ago@tbensheimer yes i tried to do some alternatives regarding to width but didn't work definitely going to implement this in my solution. thanks for your valuable feedback keep supporting!!
0 - @correlucasPosted over 2 years ago
Hello JEEVITHA, congratulations for you challenge solution!
I've to say that you did the hardest thing in this challenge, the hover icon on the image, well done!
I've looked your live site and I've few considerations about the CSS:
1.You've applied the background-color to the
<main>
, to have the background filling all the screen it's better you apply this property on<body
.2.To align you card to the center is better the you use another approach, I saw that you've applied side margins to center the card. Is better you insert the
display: flex
inside the <main> tag in the container class and to center everything add to the bodybody {display: flex; align-items: center; justify-content: center;}
.- To keep the card with an certain value, use
max-width
instead ofwidth
, your can try a value between 300px and 350px to match the card width this way you've a flexible container.
See this article to know more about centering elements with Flexbox: https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox
I did a test using devtools and your solution works centered and flexible with this modifications I wrote you before. You can try that and write me here to say if works. Feel free to do me any question. I'll be happy to help you.
Marked as helpful0@jeevitha1123Posted over 2 years ago@correlucas sure, i am really happy to see your valuable comments .. i really struggled while making my panel to align center. i will consider your suggestions and work on it. Thank you so much
1 - To keep the card with an certain value, use
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