@EnidaShehu
Posted
Congratulations on completing this challenge Nikhil :)
A few helpful tips I would give you are:
1 - Fix the spelling of the "container" class: In the <div> element with the class container, there is a typo. Change the class name from conatiner to container to correct it.
2 - The image doesn't swap when the screen size changes. To achive that add both images on your html as below:
<img src="images/image-product-desktop.jpg" class="image-1" alt="parfume-bottle" /> <img src="images/image-product-mobile.jpg" class="image-2" alt="parfume-bottle" />
After that add the CSS:
/* for current screen size*/
.image-1 { width: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.image-2 { display: none; }
/for smaller screen size/
@media screen and (max-width: 375px) {
.image-1 { display: none; }
.image-2 { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; display: flex; width: 100%; }
.image-1::before { content: url("images/image-product-mobile.jpg"); } }
I hope this helps. Keep up the good work :)
Marked as helpful