Skip to content
Submitted almost 2 years ago

Product Preview Card Component - Challange

Apo•20
@ApoBaba6
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First of all, i would like to thank to FrontedMentor for create a webpage and community for encourage people like me.

  • I started learning html and css about 3 weeks now. This is my first challange. It is probably very messy for professional eyes.

Community feedback

  • Amal Karim ✅•1,290
    @amalkarimPosted almost 2 years ago

    Hi Apo. Congratulations for completing your first challenge!

    I'm not a professional, though. But your solution is quite nice. You only need to create a media query for mobile view.

    Before that, change height: 100vh; to min-height: 100vh; for .container (try to view the preview site using smartphone in landscape mode to see why)

    Here's an example of media query for mobile:

    @media (max-width: 768px) {
	.card {
		flex-direction: column;
		max-width: 100%;
		overflow: hidden;
	}
	.card__image {
		height: 200px;
		max-width: 100%;
	}
	.desktopImage {
    display: block;
    border-radius: 0;
    object-fit: cover;
	}
	.card__content {
    width: 33rem;
    box-sizing: border-box;
    border-radius: 0;
    max-width: 100%;
	}
}

    Hope this helps. Happy coding!

    1

Please log in to post a comment

Log in with GitHub

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