Skip to content
Submitted about 1 month ago

Responsive card using CSS Grid for Layouts and Flexbox for alignments.

P
Paola Perez•50
@Perezscode
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud that I built a responsive layout using CSS Grid and Flexbox and solved tricky styling issues like aligning the original price and discount price properly. This helped me understand how layout and spacing work together.

Next time, I would plan my layout structure better before writing the code. I spent a lot of time adjusting spacing and fixing alignment issues that I could’ve avoided with a clearer wireframe or sketch.

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

One challenge I faced was getting the two-column layout to look clean without breaking the alignment, especially when adding padding to the content side. It was tricky because even small spacing changes affected the entire card’s balance, especially with the image on the left.

I fixed it by using grid-template-columns with 1fr 1fr, then adding padding only to the content side and making sure box-sizing: border-box was applied. I also used align-items: center to keep everything vertically aligned, which helped keep the layout consistent across screen sizes.

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

I’d like help improving how the card layout behaves across different screen sizes. Specifically, I want to make sure the image and content stack properly on mobile without breaking the design. I’m also looking for better ways to manage spacing so that the layout stays balanced without needing too many manual tweaks. However, I'm proud of my work because I figured a lot out on my own.

Code

Please log in to post a comment

Log in

Community feedback

  • Ezequiel•1,250
    @3eze3

    Hi , very good solution for this challenge, Paola Perez 🍕

    I have some recommendations that may help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, i know I'm projects are practical but getting used to already have or create your own structure will save you time believe me.
    • The way in which you handle the styles in cellular seem to me good, as for the images there is a tag ``<picture>``` which you can use to dynamically change the image depending on the size of your screen.
    <picture>
  <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg">
  <img src="./images/image-product-mobile.jpg" alt="Perfume bottle" width="300">
</picture>

    HTML:

    • The semantics in your code can be improved, see if you can wrap it instead of using a <div> it could be a <section> or a <main> for better semantics.

    CSS:

    • Also instead of calling the fonts directly from the html document, the best and most recommended is to have them locally and use the @font-face to use them, it is much better, since you can also centralize them in the same file when you launch larger projects.

    I hope these recommendations have been helpful to you. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn.

    Happy coding! 🍧

  • P
    Paola Perez•50
    @Perezscode

    Feedback is welcome!!! Any suggestions on how my code could've been better?

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