Preview card component with HTML CSS Bootstrap and Javascript

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Utku, congrats on finishing the challenge!

  To answer your question 2 and 3, yes there is a better approach without JS that can be quite better.

  You can get the same results using html, instead of using an img tag you can use 2 <source> tags and put the mobile version on one and the desktop in the other, inside the source tag you can specify the width, just like you would do in media querys, also remember that this tags have to be wrapped in a <picture></picture> tag.

  Hope my feedback helps you in future projects, if you have any questions about implementing this don't hesitate to ask, good job getting the challenge done!

  Marked as helpful

  1

  ---

  

  Utku Kaan Arasan•50

  @UtkuKaanArasanPosted about 2 years ago

  @DavidMorgade It works thx. Now gonna update it.

  1
• 

  Alejandro Arigon•110

  @AlejandroArigonPosted about 2 years ago

  Hello Utku Kaan Arasan! in the folder called "images" you have an image that is for the mobile version "image-product-mobile.jpg"

  to center the element I would change the body looking like this:

  body{
      background-color: var(--primary-cream);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  Hope it helps, great job!

  Marked as helpful

  0

  ---

  

  Utku Kaan Arasan•50

  @UtkuKaanArasanPosted about 2 years ago

  @AlejandroArigon Thanks, missed this detail.

  1