Not Found
Not Found
Not Found
Failed to decode param 'Roc%EDo%20Bel%E9n'
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive css card using css & js

@catboxer

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I could not figure out how to change the color of the svg. I tried using fill in the css with the important tag and using currentColor as the fill in the svg and then using color in my css but just couldn't figure it out. Any suggestions appreciated.

Community feedback

Jordan 180

@GitNutts

Posted

If it's the arrow svg you're talking about, use: button:hover img { filter: brightness(3); }

Marked as helpful

0

@catboxer

Posted

@GitNutts Yes that darn arrow and that is a great suggestion but for some reason it's only changing the background and not the svg itself. I should have set it up as a button which may be the issue. Thank you.

1

@maqsudtolipov

Posted

Without any issues

Hi there 👋

Congratulate on finishing your project 🎉. You did a great job 🔨

I give some suggestions that I hope help you take your project to the next level 📈.

  1. In your SVG file inside <SVG> tag there is a <path> tag. Change its fill="" to the color you want. I think the color was given to SVG itself so it was hard to change its color.

Happy coding ☕

Maqsud

0

@catboxer

Posted

@maqsudtolipov Hi, thank you!! Great tip but I am wanting the color to be responsive so that doesn't work. I tried currentColor there and that didn't pick up the color I assigned to the div.

0

@maqsudtolipov

Posted

@catboxer You can download starer files again and then use that svg file

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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