I had trouble with the overflow of the hover effect on the image. It still doesn't look perfect. You can see it when you use mobile emulation and click the image or when you zoom in large enough on desktop. Any advice / insights / explanations of that problem is more than welcome, together with suggestions for possible accesibility improvements.
Hey Emmiecodes 👋,
It is a nice solution you have written!
I liked your code, too. I have noticed that you do not follow a css naming convention, though (like BEM). Which in your defense is understandable given the scope of the project. Yet making a habit out of it could pay dividents in the long run.
Other than that, keep up the good work! 🙂
Hello All! Feed back is encouraged!
Hey CypherCode13, Great job on this challenge. I've noticed that it took you just over 100 CSS lines to write this which is for sure a good example of an efficient code.
On mobile version it seemed like there could still be an extra line or two used to make your work more adaptable and look better at smaller screen sizes (under 400px).
It looks good at desktop version, though.
Hope this helps :) Best of luck!
I made this a PWA(which means it's fully installable on your phone or computer) where you can play either Grizzly, Cowboy, Ninja or Rock, Paper, Scissors.
I made custom pictures for Rules slider for GCN with Figma.
Please tell me your thoughts and commentary!
Hey Diarrah,
I am just here to write that this is one cool piece of work right here. Also here to thank you for inspiring a couple of intriguing ideas through your work. And to ask you for the names of the tools that you used on your project because your code seems to be encompassing some fanciness that I am clearly not yet aware of
Best of Luck!
changes made for responsive . suggestions are welcomed
Hi, Mansi, Good job on yet another coding challenge! Here are a couple of small little tips and suggestions for further exploration.
-What really is a fundamental part of developing is media queries. Which is something that could make your websites responsive to different screen sizes. Be it phone or laptop. Media queries helps us to adjust to that
-Inline styling isn't typically advisable but if you choose to use it as you did on your challenge, the correct syntax would be: style="font-size: 18px;"
Hope this helps, best of luck!
I can't figure out how to get the arrows to rotate upside down when the accordion is open. I think I have to store them in a variable in JS and then toggle the class when the button is clicked but I couldn't figure out how.
I would really appreciate any feedback on this question and the overall code in general.
Thanks!
Hey Zach, good performance on this rather demanding challenge!
As for your question, toggling a properly styled class with an onclick event is indeed one of the ways to achieve the visual rotation of the arrows.
For this, have an onclick event that starts a function -> target the arrow element there (be it by class or by id) -> add and remove a class that has 'transform: rotate(180deg)' property to rotate the image.
Hope this helps! Best of luck!
Having trouble getting this to work on mobile. Some advice on how to get started for mobile would be welcomed.
Hi Andrew, Good job at desktop version. As for mobile version there is an important aspect to keep in mind that would be useful for you.
That aspect is media queries which is basically a css technique that allows you to style a page at different widths. The important trick to remember here is that it is always easier to start with a styling for mobile version first (narrower width) and build up from there (other way around could prove an interesting and educational challenge, too, yet it is typically not as time efficient).
Hope this helps, best of luck!
