Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Card using HTML And Css

@Anshuman1803

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


To provide your feedback, I kindly ask you to take a few moments to review the project and share your thoughts with me. Your responses would be greatly appreciated:

Thank You!

Community feedback

Suleman 750

@legion40216

Posted

Bro good work some suggestions

First you should start with the layout you can either use grid or flex to accomplish this you need two equal columns and add max-width for responsiveness also remove height

Avoid using height unless you have to instead use padding of the content to size according to your liking

.cardContainer {
max-width: 40rem;
border-radius: 20px;
background-color: hsl(0, 0%, 100%);
display: grid;
grid-template-columns: 1fr 1fr;
}

now we remove widht and height from .RightSide and LeftSide

.RightSide {
padding: 0 30px;
/* width: 30rem; */
/* height: 100%; */
}

Happy Coding...

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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