What are you most proud of, and what would you do differently next time?
Proud to have been able to succeed using a mobile-first approach, as it was the my first challenge of this kind.
What challenges did you encounter, and how did you overcome them?
Placing and styling the image correctly inside the container was one of the main challenges.
What specific areas of your project would you like help with?
How would you make the transition of the mobile-image for the desktop-image? I placed both on the HTML structure and then used "display: none" on the media queries in order to hide them... but it didn't feel the best way to do this.
@laura-nguyen
Posted
Hi! Great job with the styling. For the desktop image to fit in the container, you can do object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. After that, you can adjust the width of the card/component to make sure the image is fully displayed.
Marked as helpful
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
