Product Preview - Vanilla HTML/CSS

Community feedback

• 

  Yusuf K. Muhammad•570

  @kyusufmPosted 9 months ago

  Hi Craig,

  Small suggestion for the card.

  • for the button you can use border:none so the black border didnt show
  • Try to remove 700 font-weight on the button

  for the image, you can add wrapper on top of the image, and set overflow hidden in the .card

  and i think you forget to text-transform the "perfume"

  Marked as helpful

  0

  ---

  

  Craig•190

  @cchiversPosted 9 months ago

  @kyusufm I made the changes that you have recommended, but I am running into the issue that I don't know how to implement the overflow hidden or mask that you are speaking off. Do you have any examples that I could look at to make that correction.

  I was originally trying to do something similar where the border-radius is auto depending on orientation without trying to hard set that value in CSS, but instead try and mask it based off the card border-radius.

  0

  

  Yusuf K. Muhammad•570

  @kyusufmPosted 9 months ago

  @cchivers

  You can add it inside the card class

  .card {
  overflow:hidden;
  }
  

  this will help you to not put border radius in your image. so you can remove all border-radius that attach to image i.e: border-bottom-left-radius: 10px;

  You should use 2 image. first is the desktop, second is the mobile. From current code you are using the mobile. If you change the current image to desktop it will look better <img src="./images/image-product-mobile.jpg" alt=""> change it to <img src="./images/image-product-desktop.jpg" alt="">

  another thing is, add class to the image so we will display each image on specific screen size. for example: <img src="./images/image-product-mobile.jpg" alt="" class="mobile"> will display:none if screensize is larger and will shown if screensize is smaller

  you can check this sample https://perfume-product-kyusufm.vercel.app/

  Best of luck!

  Marked as helpful

  0

  

  Craig•190

  @cchiversPosted 9 months ago

  @kyusufm

  Thank you so much, I was able to fix my issues and update the code accordingly. It works better on responsive side now.

  0