Looking to hire developers?
I will need some assistant with the mobile design.
@JeuriMorel
Posted
Hey Moses,
Try adding display: block; to your image tags to remove the little bit of space under them. On the mobile version of your solution the overlay creates a small border under the image because of this extra space.
I see that you are using the desktop version of the image even on mobile. You have display: none; on the mobile image, but never use it.
Marked as helpful
@Moses4data
Posted
Thank you @JeuriMorel I tried using the mobile-img but it wasn't displaying. I would be glad if I can get clarity as to how to make it work. Thanks
@JeuriMorel
Posted
@Moses4data
I always use the HTML <picture> element in these situations. It will switch between images automatically based on the screen size.
Read more here
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
