Looking to hire developers?
Submitted
@chinmayagarwal3007
Hello 👋!
So, this was my first JS challenge. I have so many doubts which I will really appreciate if you can help me find answers
. I am not able to fix the image at the right position in mobile user interface and how to give that shadow effect under the image.
. I am unable to figure out how to put all down arrows in one line.
. Paragraphs are showing orange color on hover only before they are clicked once they are clicked this hover property is disabled please tell me the reason of that.
. Finally, I think my JavaScript code is too long, so is there any modifications that I can make?
Please help!!!
@ahmedmelfay
Posted
document.getElementById("d2").getElementsByTagName("p")[0].style.color = "black"; document.getElementById("d2").getElementsByTagName("p")[0].style.fontWeight = "700";
javascript applies the styling inside of your html therefore overwriting your css and giving your p[0] color of black and font weight of 700
@ahmedmelfay
Posted
For the arrows issue, you can make a container div which has the 2 divs inside 1 for the question and 1 for the arrow. give the parent container div display:flex; justify-content:space-between;
and viola.
As for the click problem, im sure its an issue with your js, try using css instead, for example you can use .p1{ transition: color 0.3s; } .p1:hover{ color: orange; }
You can also add 'cursor:pointer;' to your p1 class for better UX, to make it look like its actually clickable.
@chinmayagarwal3007
Posted
Thanks!!!
So, I worked on the suggestions given by you and it get my problems fixed.
I will really appreciate if you can give me the solution of problems related to position of image..
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
