- I could not figure how to make proper circular borders around social media icons in a way that borders would not cover the icons.
- I also find it difficult to change the colors of the icons according to challenge. Is that necessary to switch icons images (each of different colors) or is there method in CSS or JS that would help to change the colors?
Przemyslaw Pracz
@rayofhope50All comments
- @Arkadiusz-coderSubmitted about 1 year ago@rayofhope50Posted about 1 year ago
-
(Look up my solution)(as an example) button height 60px svg height 24px and it shouldn't cover the svg.
-
Try to find coloured svgs, then in its code you simply change fill to whatever you like. You add svgs as img but you can directly paste svgs code into HTML.
0 -
- @BBualdoSubmitted over 1 year ago
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!
@rayofhope50Posted over 1 year agoWith 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 -