Why moon-icon not in the right place?

Hello, I do not understand why "moon-icon" not in the right place Here is my code: https://codepen.io/lanszelot/pen/YzgpmzL Here is how it have to be /image/:
No description
9 Replies
clevermissfox
clevermissfox10mo ago
I’m not totally sure as I’m on mobile but it may have something to do with #moon-icon being an image that is not a direct child of the grid, it’s a direct child of #icon , and you’re also assigning display: grid to the image itself. Do you mean to have that selector as #icon ? Also just noticed you have two divs with the ID of icon. iDs have to be unique, if you want to reuse a selector , it’s gotta be a class or a data-attribute
Mannix
Mannix10mo ago
yep check if you asign your grid-area correctly also you can't have more then one element with the same id on the page
lanszelot
lanszelot10mo ago
First of all, thank you for reply. yes, I am not realized, because I am not use that "icon" id, that is juas a mistake. That div do not need id or class
Mannix
Mannix10mo ago
you also put a grid on an img tag 🙂
lanszelot
lanszelot10mo ago
"check if you asign your grid-area correctly" : could you please help me how it should have to be?
Mannix
Mannix10mo ago
so you have grid-area: moon-icon; on #moon-icon and it should be on it's parent on a div with id icon2 same for icon-link
lanszelot
lanszelot10mo ago
Yes, now I see. I put the grid area on wrong div. Thank you so much for help 🙂
clevermissfox
clevermissfox10mo ago
Yea the whole selector #moon-icon needs to be switched out for its parent #icon (or if you’ve changed it #icon2) You can’t put a grid on an image either so just switch the whole selector
lanszelot
lanszelot10mo ago
Yes, this is why I created ID for that div, but I used a wrong id in css. This is why not used #icon and this is why I did not realize there are 2 same id in it Thank you so much for help all of you 🙂
Want results from more Discord servers?
Add your server