Skip to content
Submitted 8 days ago

Product Preview Card Component

Sean Chen•140
@chenmeister
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

What are you most proud of, and what would you do differently next time?

For this project, this is my first time utilizing flexbox to create the layout. I find it very useful as it keeps the layout neat and organized. Overall, I find myself getting better with CSS with each project. This is also my first time using the mobile first approach. It not only makes the CSS code more efficient but also organized when it comes to adding CSS code for the desktop version without repeating code. I am learning how to create a gameplan on how to approach common UI components such as dialog boxes and others so that it will be useful for future projects. It will also speed up development time as well.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was to ensure smooth transition from mobile to desktop. I've noticed some padding issue with the perfume image but I was able to modify the margins accordingly for the width of the card content with product information. Overall I find this project fun and challenging.

What specific areas of your project would you like help with?

What I hope to improve on this project is for the desktop view, I would like to improve the padding and perfume image in the card so that when the user shrinks and expands the width, it would not leave extra space. Right now I am using lower margins on the card component product details to resolve this extra space issue for the perfume image.

Community feedback

  • Martin Liesche•530
    @marliedevPosted 8 days ago

    Sean, your solution looks fine and the overall code and style structure is clean and readable. This could be improved by using BEM-Methodology, CSS Custom-Properties and comments.

    Regarding your question: For a cleaner solution you have to either work with "grid" in the desktop view or give the card-item a fixed height, make both content-containers (image and card-content) fill this height and size them in width by 50%.

    Another tip: work with paddings instead of margin inside the card-item.

    @media (width >= 480px) {
    .card_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 450px;
     }
     .image_media {
          height: 100%;
          width: 50%;
          img{
             width:100%;
             height:100%;
             object-fit:cover;
          }
     }
    .card_content {
        width: 50%;
        margin: 0;
        padding: 1.5rem;
        height: 100%;
        .product-details{
             flex-grow:1;
         }
    }
}
    Marked as helpful
    0
  • Saiful Islam•500
    @saifuldtPosted 8 days ago

    hey @chenmeister your design is good , Fixed some issue for better *fix width (h1,p) *not image show in mobile *decrement gap

    Marked as helpful
    0

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