Product preview card

Community feedback

• 

  Yasmine•700

  @Yasmine10Posted over 2 years ago

  Hi Rajesh 👋

  You only have to set the border radius on <div class="row container">. When you then add the overflow:hidden it will cut off the corners of the image because those are overflowing the container. So if you remove border-radius: 3% 0 0 3%; from the <div class="col product"> it should still work.

  Hope this helps!

  0

  ---

  

  Rajesh Janyani•330

  @Rajesh7rjPosted over 2 years ago

  @Yasmine10 Thanks for answering me.

  But I'm talking about mobile design, in web design it works. but what to do for "image-product-mobile.jpg" ????

  0

  

  Yasmine•700

  @Yasmine10Posted over 2 years ago

  @Rajesh7rj

  Should work too but I think it's because you have position:absolute on there that it doesn't. So if you add a position relative to <div class="row-container"> in de media query for the mobile version it should work 😊

  Marked as helpful

  0

  

  Rajesh Janyani•330

  @Rajesh7rjPosted over 2 years ago

  @Yasmine10 Got it bro, Thanks for help.

  I'm beginner, can you suggest books or sites or any resources for my front-end skill improvement, currently I'm javascript, and whenever i do challenges in this sites always face difficulty, I think it because less awareness about html and css 's functions, elements, methods. If you help it would be great.

  Thanks again for help.........

  0

  

  Yasmine•700

  @Yasmine10Posted over 2 years ago

  @Rajesh7rj

  These are some resources that I think are great: HTML & CSS

  • Kevin Powell Youtube
  • Conquering responsive layouts free course

  Javascript

  • Javascript free course
  • Web Dev Simplified Youtube

  If you need any help, you can always ask me on slack if you want 😊

  Marked as helpful

  0

  

  Rajesh Janyani•330

  @Rajesh7rjPosted over 2 years ago

  @Yasmine10 Thanks buddy... 🙏

  0