Barely-responsive product preview card, using flexbox & srcset plshelp
Design comparison
Solution retrospective
ISSUES WITH MY SOLUTION:
- Only completely optimized on viewport widths 1440px and 375px. The biggest issue is with the main perfume image
- Used srcset attribute in my <img> tag for the main perfume image to change when the viewport reaches 375w or 1440w-- this works fine but when I try to change the values around (in the srcset values) to adapt to widths in between 375px and 1440px, the image stretches/distorts or unwanted gaps are formed in the image container.
I tried to use relative units for most of the sizing. I don't know how to make the image properly scale depending on the size of the viewport while avoiding making multiple media queries. Any help or tips would be greatly appreciated.
Community feedback
- @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 helpful1 - @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 - @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 withbackground-image
. Use it to place the images and make the change between mobile and desktop, instead of using adiv
orimg
and set the change in the css withdisplay: 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 devicemax-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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord