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

Product preview card component

#accessibility

@CeriOwl

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I want to know how to resize the svg element, because I can't did it when I try. And my second question is if I did the button well, because I feel that part complicated for the svg element and I didn't know how to created in the better way.

Community feedback

Laura Alvarez• 80

@lalvarezz

Posted

Hey, Ale! I was having issues with the button icon as well, however, just consider your button as any other div, in order to adjust the icon width you just have to use .button img{width: 1em;} this will make your icon width the same as your font-size.

I also recommend you to study object-fit property, this will help you as well for re-sizing small icon into divs, so the css button could have these properties .button img{width: 1em; object-fit: contain;}. It takes a little bit of practice. I hope it helps you!

Marked as helpful

1

@CeriOwl

Posted

@lalvarezz I really appreciate your tips and your response a lot, and more that you explain me this in a easy way. Thx.

0
Gvne• 70

@gvnee

Posted

Instead of copy pasting svg. You can use img to import the svg file. Like this <img src="images/cart-icon.svg>. And if you want to resize the icon don't edit the svg file. Instead use css width and height.

1

@CeriOwl

Posted

@gvnee I din't know that you can do it like this, I always thought that you need to copy paste the svg into the html. Thx.

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