Responsive Four Card Feature Section using Vite + React
Design comparison
Community feedback
- @tinnq66961996Posted 7 months ago
in my solution, why one picture show full icon, another does not. Please help me
0@OmPreethamPosted 7 months agoIn your code snippet, you've cleverly used the 'srcset' attribute to display images based on the width of the viewport. However, to make it more reliable, it's advisable to include a fallback option using the 'src' attribute. This ensures that even if the browser doesn't support 'srcset' or none of the specified sources are suitable, there's still an image to display.
Whitespace in srcset: While whitespace within the srcset attribute doesn't affect functionality, it's generally better to keep your code clean and consistent. You might want to remove the extra whitespace for readability.
Missing sizes attribute: It's recommended to include a sizes attribute along with srcset to provide the browser with additional information about the intended display size of the image. This helps the browser select the appropriate image source based on the device's viewport size.
Here's how you can improve your code:
<img class="image" src="images/default-image.jpg" srcset=" images/image-product-mobile.jpg 375w, images/image-product-desktop.jpg 1255w " sizes="(max-width: 600px) 375px, 1255px" alt="profile img">
You could check this youtube link by Kevin Powell or website for further information and other methods to improve your code.
https://www.youtube.com/shorts/d9i68C628Nk
https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t
0@tinnq66961996Posted 7 months agoDear @OmPreetham Thank for your advice. I will check your topic that you gave me.
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