Responsive Product Preview Web Component Using HTML & CSS Flexbox

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  I have another suggestion. Instead of adding border-radius on both elements, you can add it directly to .product-preview. So then, you don't need to worry about it on mobile/desktop.

  .product-preview {
    border-radius: 10px;
    overflow: hidden;
  }
  
  .product-image {
    /* border-radius: 10px 0 0 10px; */
  }
  
  .product-main {
    /* border-radius: 0 10px 10px 0; */
  }
  

  Marked as helpful

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  @prantiknoor wow, that easy? i couldn't figure out. thank you I'll implement it. can you please explain a little bit what the overflow: hidden; decleration does to it?

  0

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @johnnysedh3lllo It hides overflowing contents. As the image and content overflowing on the corners, overflow: hidden hides that.

  Marked as helpful

  1

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  @prantiknoor thanks alot man. God bless you. just tried and it works like a charm.

  0

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @johnnysedh3lllo Thank you 🙂

  1
• 

  P

  Eric Beaulieu•30

  @cyberic67Posted over 2 years ago

  Hello Johnny

  For different imgage source based on screen size, you can use the "srcset" attribute in a picture element:

  <picture> <source media="(min-width:660px)" srcset="images/image-product-desktop.jpg"> <img class="card__pic" src="images/image-product-mobile.jpg" alt="Product picture"> </picture>

  reference: https://www.w3schools.com/tags/att_source_srcset.asp

  Marked as helpful

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  @cyberic67 thanks alot Eric, I'll try this new approach.

  0
• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Johnny, Congratulations!! 🎉 you have completed your first challenge.

  Your style of asking questions is very well & appreciated.

  I have some feedback.

  .product-preview {
    /* You should give the card width. So you can get more control over your layout. */
    max-width: 40rem;
  }
  
  .product-main {
    /* So you don't need to give width here. */
    /* width: 40vh; */
    /* This code will make the main content 50% of the card width. Now the image width will be 50% too. */
    flex: 1 0 50%;
  }
  
  .product-image {
    /* You shouldn't hard code this. */
    /* height: 57vh; */
    object-fit: cover;
    height: 100%;
  }
  

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  @prantiknoor thank you so much. i really appreciate you reviewing my code. I'll implement these new changes soon.

  0