Design comparison
Solution retrospective
I don't know if I used position: absolute right, because of high top and left values and because I don't know how to make the cube not overflowing with other images overflowing :( I'm also not sure about my js. It works but is it effective?
Thank you!
Community feedback
- @rayofhope50Posted over 1 year ago
With regards to overflow. You’re applying it to main which means everything inside will be “cut”. In order to fix that you can either:
-
Move box on top of the main create a wrapper around it with
postion:relative;
(for next issue) -
Apply
overflow:hidden;
just on.left-side;
or even better.images
Changing that will make box appear, since it will be outside of the class where you apply hidden. When rest of images will be cut off.
~Not gonna lie that annoyed me at the end especially positioning.
Your positioning seems fine but your
<main>
is expanding when you expand the answer. I would throw hard coded height value on it to prevent that. Which would also stop the box from moving when an answer is displayed.For your JS check
.forEach()
and.toggle()
I understand why your js looks like this. Sometimes we do not know what we do not know I had a hard time to come up with a way to code all of them with the same class and be able to add.querySelectorAll
and useeventListener
so had to learnforEach().
Also you use js for making headers bolder which should be CSS’s job. Simple .active class which you add with JS would do the trick.
In general use HTML for a structure (that’s why I do not like on click you hard code HTML to enable js to work) CSS for styling and JS for functionality.
On that note I use JS to change my CSS on hight of my answers during animation simply for better looks as I could do it with CSS but wouldn’t look that much smoother.
Witam, odpisalem po angielsku bo widze, ze nie masz z nim problemu I w razie W jak by ktos mial podobny problem. Na lapku nie mam polskiej klawiatury wiec sorki za ogonki :)
Marked as helpful0@BBualdoPosted over 1 year ago@rayofhope50 Hi, I'm much further in JS than I was during this challenge, so now I know I should use
.querySelectorAll
and.forEach
method :D I'm trying to focus on next projects rn, but I get everything you said, thanks a lot!Nie ma problemu :) jeszcze raz dzięki za podpowiedź :D
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