Frontend-Mentor|product-preview-card-component-main

Solution retrospective
This was more difficult than I thought it would be but I'm proud of the changing of the image using different classes.
What challenges did you encounter, and how did you overcome them?Making the website responsive was really a challenge for me. I tried to make it responsive first by using flex-wrap but it didn't work. Then using media query helped but it took a lot of time. But happy with the end result.
What specific areas of your project would you like help with?Is there a better way to code the main container and boxes or make the image change without creating two different classes.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Blackpachamame
Greetings! you have done a great job 😎
📌 Some suggestions
- Use
min-height
andmax-width
, this will help the content stretch or shrink if you need to. Unlikeheight
andwidth
which can cause your content to be cut off on certain screens. For example, usemin-height: 100vh
instead ofheight: 100vh
- Instead of using
margin
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body { color: var(--Dark-grayish-blue); background-color: var(--Cream); font-size: 0.875rem; font-family: var(--ff-basic); font-weight: 500; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; /* Separate the main from the footer */ } main { padding: 1rem; } .container { display: flex; justify-content: center; flex-direction: column; min-width: 320px; border-radius: 10px; overflow: hidden; } @media (min-width: 800px) { .container { flex-direction: row; width: 50vw; } }
- You can use the
<picture>
tag to change the image according to the screen size. More info
Marked as helpful - Use
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