Product preview card component

Solution retrospective
Nice for revising the responsive layout but some one tell me how to use different images in a single layout? I use display property to manipulate the images, but may seem to , that both images get loaded when opening the website, and last thanks, cheers.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @gautamjuyal
In order to change the image for a certain viewport, you can enclose the image inside a container and change the content property for the container for certain viewport width using media queries. For e.g. I have enclosed the image inside an img class container, now in order to change the image for a certain viewport width, i would add following chages :
@media (max-width: 400px){ .img{ content:url(/../..); }
Marked as helpful - @rezabox
hi ARSHAD023 good job for first project but you can better style for this project for example the button of project is not good style you can use margin-bottom to better style and you can use a font-size better in this project and the title of top of the page use letter-spacing of this and font-size change 30px i think maybe is good style for this but you can practice for this and use better style . ok .Ihope Icould to help you ok have good day bye
Join 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