
Submitted about 1 month ago
Responsive landing page for Product Preview Card.
@vijay1maroju
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I feel good that I started using CSS grid and flexbox now.
What challenges did you encounter, and how did you overcome them?I faced challenges with media queries, I tried my best to make the mobile version look better, but I don't know if it is as good, I think I did quite good in desktop version.
What specific areas of your project would you like help with?I would like to improve with media queries, dealing with image resizing and image replacement in media queries.
Community feedback
- @jdtb4Posted about 1 month ago
Hi, first of all congratulations, you finished the challenge.
- Change the
grid-template
togrid-template-columns: repeat(2, 1fr);
that would fix the error in the grid. - Use
margin: 10% auto;
to center the card. - Add
border: none
in the button to remove the border black. border-radius: 15px;
will round the corners of the card.
0 - Change the
Please log in to post a comment
Log in with GitHubJoin 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