Product preview card using CSS and Html

Community feedback

• 

  Ruben•550

  @RubenSmnPosted over 1 year 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.

  Marked as helpful

  1

  ---

  

  Obialor Ijeoma•30

  @IgraziellaPosted over 1 year ago

  @RubenSmn Great, will try out your suggestion. Many thanks.

  0
• 

  Munsif Ali•200

  @Munsif-AliPosted over 1 year 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.

  0

  ---

  

  Obialor Ijeoma•30

  @IgraziellaPosted over 1 year ago

  @Munsif-Ali Hi, I've actually been having some issues with this challenge and would appreciate any help I can get on it. Thanks

  0

  

  Munsif Ali•200

  @Munsif-AliPosted over 1 year ago

  @Igraziella give me your github repo link i will try to help you.

  0

  

  Obialor Ijeoma•30

  @IgraziellaPosted over 1 year ago

  @Munsif-Ali here you go https://github.com/Igraziella/product_preview_card

  0