Responsive "Product preview card component" solution using Flexbox

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello, @OniOdd!

  The issue is arising due to the conflicting images you have put up in the <picture> element and no media attribute being used on it hence the image doesn't switch. The sizes attribute being used doesn't switch images instead it sets the sizes at which the images should be displayed and the widths specified along with the URLs is used by the browser to see if the space is available to fit that width is there then only it will show the image. Since you are already using <picture> you can make do without using sizes or specific widths. The most basic use case of this would be using sizes when you want to control the images using the img tag alone.

  To fix the issues:

  • First of all, decrease the min-width:90em of your media query to something smaller as maybe up to the size of tablet devices (768px) so that the card isn't shown in for mobile view for laptop users as well.

  Some few things to explain before diving into the code snippet:

  • In your current picture element in the source you have used srcset to set both the mobile and desktop images in jpg and webp. This is what I think is the reason why it's causing responsive issues. It's best to separate all the srset URLs to their respective source to avoid responsive issues.
  • If you look closely the image in the screenshot is actually the mobile one and all this might be due to the info I provided earlier. So rewrite the <picture> element to this:

  <picture>
    <source media="(min-width: 768px)" srcset="./images/image-product-desktop.webp" type="image/webp">
    <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg" type="image/jpeg">
    <source srcset="./images/image-product-mobile.webp" type="image/webp">
    <source srcset="./images/image-product-mobile.jpg" type="image/jpeg">
    <img class="card__image" src="./images/image-product-mobile.jpg" alt="Image of Gabrielle perfume">
  </picture>
  

  • Since you are using mobile-first workflow, I have updated the src of img so that the initial image is the mobile one and see how I have provided different sources for jpg and webp. The first two sources don't have the media attribute because if the initial image isn't there then these will be displayed and for desktop ones, I have used the media so that they switch when the width is above 768px. (I have done the same for the desktop jpg and webp as well).

  This should hopefully fix the issue you are having, you might have to play around some CSS after this though.

  Not gonna lie this kinda made me scratch my head several times to find the issue first then delete stuff in devtools and add stuff but eventually fixed it with what I wrote above 😭

  If you still get the issue after this then let me know and we can work it out together hahahaha

  Edit: I just checked after typing this out and It seems that you've fixed it....just a change though instead of using max-width in those media attributes keep it the same way you have used media for CSS that is the mobile first workflow that way it wont be confusing (You can refer to the snippet above as it is according to mobile first)

  Marked as helpful

  1

  ---

  

  Mykyta Kavetskyi•240

  @OniOddPosted over 1 year ago

  Hello, @adityaphasu!

  Thank you very much for such a detailed review! But, as you wrote, I have solved this problem. I could not calm down and thought about it for a long time 🙃

  The most interesting thing about this is that the problem arose when the code contained .jpg images 🤔 But I decided to completely rewrite this piece of code to finally solve this problem. And your solution is very similar to mine. As they say, geniuses think alike))

  By the way, I specifically used the default image for the desktop version, because in case all other images are not displayed, the desktop version looks adequate in both mobile and desktop versions.

  As for the breakpoint, I chose it intuitively, but your option looks more interesting.

  Regarding your option. I would also like to add that this line of code will be unnecessary, since you have already specified the mobile version in the <img> tag itself. So you just duplicated the code)

  <source srcset="./images/image-product-mobile.jpg" type="image/jpeg">

  But thank you again for taking the time to help me. I appreciate it! 😊

  1

  

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  @OniOdd ah it might seem duplicate but It's supposed to be a fallback in case the browser doesn't support the media attribute so in that case this will be used but I guess it might just serve the initial image tag one instead so yeah its unnecessary bahahaa I was just typing and actually forgot to review my feedback again because I was going back and forth between the repo and the site when I was making changes and pretty much ended up confusing myself 😵‍💫

  Btw I forgot to mention that your solution is amazing!!! it's quite nice to see nice semantics :))))

  Marked as helpful

  1

  

  Mykyta Kavetskyi•240

  @OniOddPosted over 1 year ago

  @adityaphasu Thanks :)

  0