Product preview card using CSS and Html

Community feedback

• 

  Ruben•550

  @RubenSmn

  Posted over 2 years ago

  Hi Obialor, I was looking at the code for the border-radius as you mentioned.

  This goes from top left to top right to bottom right and finally to bottom left. Some more detailed information can be found on MDN docs.

  You can implement this by using border-radius: 10px 0 0 10px for the image and border-radius: 0 10px 10px 0 for the message. If you do it this way its recommended to not place the border-radius on both elements at once since they need to have different values.

  Another way you could solve this is to wrap both the img and .message in the .container and apply styling to the container. This way you don't have to apply the border-radius to the individual elements.

  .container {
    border-radius: 10px;
    overflow: hidden; /* This makes sure the image has also rounded corners */
  }
  

  Of course this approach will need some additional styling to adopt the new layout.

  11

  Marked as helpful
• 

  Munsif Ali•200

  @Munsif-Ali

  Posted over 2 years ago

  Firstly, the code is not currently responsive, which means that it may not display optimally on various devices and screen sizes. Additionally, the required color scheme has not been fully implemented, resulting in a less cohesive overall design.

  Furthermore, the border radius has not been properly applied, resulting in a less polished appearance for the design elements. In particular, the card does not look as visually appealing on desktop sites, and the design becomes broken on mobile versions of the site.

  Overall, while the code is a good starting point for the project, there are some areas where additional work is needed in order to fully realize the design requirements and ensure a consistent and visually appealing user experience across different devices and screen sizes.

  if you need any help regarding this fell free to connect. i would be happy to contribute with you on this project.

  03