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

Mirm 80

@Missteeme31

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'm having issues utilizing containers to group items for CSS positioning. What is easier to use, flexbox or grid?

Community feedback

@CharlieeLuna23

Posted

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

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