Barely-responsive product preview card, using flexbox & srcset plshelp

Community feedback

• 

  Benjamin Nicholas Wells•230

  @BenjaminNicholasWellsPosted about 2 years ago

  Hey there hran

  Your img element requires a sizes attribute to tell the browser which image to use depending on the media query you give it. In addition to that you are using the width units incorrectly in your srcset values; given the values you used I assume you have confused the w unit for the vw unit. That or you've taken the width of the design previews by mistake.

  <img class="main-img" 
    src= "./images/image-product-mobile.jpg"
    srcset= "./images/image-product-mobile.jpg 375w, 
    ./images/image-product-desktop.jpg 1440w" 
    alt="perfume bottle" />
  

  Becomes:

  <img class="main-img" 
    src="images/image-product-mobile.jpg"
    srcset="images/image-product-mobile.jpg 686w, 
    images/image-product-desktop.jpg 600w"
    sizes="(max-width: 376px) 686px, 600px"
    alt="perfume bottle" />
  

  (You don't need to add ./ to the beginning of your image urls if the folder containing the assets and your .html file share the same directory)

  You can read more about what the w unit does here but in short you need to tell the web browser what the width of the file is and that's established as a value in the srcset attribute. After that you define when to use the image by means of media queries and the widths you set in this attribute is the width of the image when the web browser renders it (goes without saying that this width isn't a permanently fixed value; you can manipulate it as you wish in css).

  Minor thing regarding the media query in your css file before I go; be sure to specify the media type as screen followed by your media query to ensure you don't interfere with other media types i.e. speech and print.

  Hope this helps.

  Marked as helpful

  1
• 

  Željko•210

  @c0dz-wqPosted about 2 years ago

  I see that you have trouble comprehending how "responsive design" works.

  Fret not! We all been through that. I adivise you to check out the article about Media queries on web.dev:

  While you are there, wouldn't hurt to familiarize yourself with the Picture element.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @hran-8, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

  Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

  See the example below:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  ✌️ I hope this helps you and happy coding!

  1