Product Preview Card Component

Community feedback

• 

  CharlieeLuna•260

  @CharlieeLuna23Posted about 2 years ago

  Hello, mirm, you did a really good job here!

  Let me provide you some tips and feedback that has worked for me.

  First off, try to clear all of the HTML/Accessibility Issues listed. For example, you don't have a title in your HTML. After the body, usually comes the <main> tag which ensures that your website has the most important information there, in this case, just wrap everything under the that tag.

  Regarding your problems with the border-radius on the left side, what's happening is that your card has that but your img doesn't. It happens to me too, it seems that the image is not being affected by that design on your card in CSS so just make sure to apply the same design to the image. You can eitre use something like: "border-radius: 10px (top-left), 0px (top-right), 0px (bottom-right), 10px (bottom-left). Or you can just use the actual selection with top-left-radius: 10px.

  Also something you may want to try, remember that this projects are intented to be design in a "mobile-first" view, meaning that you design everything in mobile view and then you upscale to desktop. It's not as hard as it sounds, feel free to check my own solution if you need any hints: https://www.frontendmentor.io/solutions/product-preview-card-R3zhJwDAGo

  Hope this helps and if you have any questions, feel free to ask!

  Good luck on your learning journey!

  Marked as helpful

  1