Skip to content
Submitted 3 months ago

Responsive product-list-with-cart

react, redux-toolkit, tanstack-query, typescript, pure-css
P
Nishanth Venkatesan•1,030
@nishanth1596
A solution to the Product list with cart 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 really enjoyed this challenge. Since I am accousmed to tailwind css, I faced a lot of setback in using vanilla css. But there were perks of using it, I used module css, so debugging was way to simpler compared to tailwind but I have to write a lot of code.

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

The alignment of the "Add to Cart" button is incorrect, and I’m not sure why it’s getting wrapped. However, if I remove left: 50%, the issue is resolved. It seems to be related to positioning—since there isn’t enough space, the button is wrapping to the next line.

I've never encountered this issue before, so I’m unsure how to fix it. Any help would be greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Waldemar Glaz•845
    @waldekglaz

    Hi, @nishanth1596. The simplest fix is to give some fixed width to your button. width:170px works well on >768px.

    Marked as helpful
  • Marzia Jalili•7,610
    @MarziaJalili

    Eid Mubarak!

    You can resolve the issue simply by putting a minimum width for the buttons. We will set it to a % value to ensure it works for any screen size. And therefore, we will need the justify-center Tailwind className to center the conent inside the button everytwhere.

    • So add the following lines:
    <button className="min-w-[80%] justify-center">
    • Or you can added to the ._button_18y89_1:
    min-width: 80%;
justify-content: center;

    This definitely works!

    Last suggestion, instead of going back to pure CSS for elements like ._button_18y89_1 you can use the @layer and @apply nested inside it for adding those Tailwind classes.

    You can go through the documentation and understand it perfectly, it's a cake walk, pretty straight forward.

    Hope the tips were helpful!

    😎😎😎

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @MarziaJalili Could you help me with this "Add to Cart" button issue?

    I've spent a lot of time on it but couldn't fix it. So, I decided to seek your help first before proceeding any further

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