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
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first approach using Sass and BEM methodology

Kerri-Ann 330

@Kerri-AnnBates

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


Had a little trouble figuring out how to change the color of the share button image, so opted to creating a new image with a different color. Any advice on how to accomplish this?

Community feedback

@nikkuv

Posted

You did a great job on your first project. It almost looks the same as in the design. All you have to do is on your share button set the style of "outline: none" on focus, like this. &:focus{ outline: none; }

1

Kerri-Ann 330

@Kerri-AnnBates

Posted

@nikkuv oh nice! I actually was wondering about that on another project I was working on. Thanks for pointing that out!

1

@PedroLealLopes

Posted

To change the color of an svg add this to its style with the respective color you wish to apply. For example:

.___footer-share-active{
  fill: red;
}
0

Kerri-Ann 330

@Kerri-AnnBates

Posted

@PedroLealLopes Thank you, I'll give that a try as I'm making improvements.

1

@bashiroglu

Posted

Hi @Kerri-AnnBates, sorry I didn't figure out what you are asking. But as a improvement, you can add some padding to top and button in mobile size. Good luck

0

Kerri-Ann 330

@Kerri-AnnBates

Posted

@bashiroglu thanks for pointing that out. I see that. I'll make that adjustment.

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