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/:
9 Replies
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
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
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
you also put a grid on an img tag 🙂
"check if you asign your grid-area correctly" : could you please help me how it should have to be?
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
Yes, now I see. I put the grid area on wrong div.
Thank you so much for help 🙂
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
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 🙂