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 use eventListener
so had to learn forEach().
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 :)