Skip to content
OverviewSolutions
39
Comments
9

Waldemar Glaz

@waldekglazWarsaw, Poland845 points

Junior Frontend Developer at Cheil Poland

I’m currently learning...

React JS

Latest solutions

View more solutions

Latest comments

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596
    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.

    Responsive product-list-with-cart

    #react#redux-toolkit#tanstack-query#typescript#pure-css
    3
    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
  • P
    turtlewords•410
    @Turtlewords
    What are you most proud of, and what would you do differently next time?

    The popups came out relatively well and function properly. Next time, I might include some sort of animation when the popup activates.

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

    Placement of the main image was a challenge. I ended up using the image as the background of a div. This way, I was able to position the image as needed.

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

    Please take a look at image position as well as element spacing. Thank you.

    Article Component with Popup

    1
    Waldemar Glaz•845
    @waldekglaz

    Hi @Turtlewords, you could wrap your image and text area in one container:

    <parent>
    <img>
    <text>
       <nested text>
       <><>
    </text>
</parent>

    set parent to flex with direction column on mobile and row on bigger screens. Try also to focus on responsiveness and avoid in this case vh and try px, em or rem.

  • Waldemar Glaz•845
    @waldekglaz

    hey @pohyongzhi

    Try to fix "jumping" effect when hover over learn more buttons.

    Good job

    Marked as helpful
  • Waldemar Glaz•845
    @waldekglaz

    Hi

    It looks good.

    You could use type="tel" for Phone Number field and add some validation to make it perfect.

    Marked as helpful
  • Waldemar Glaz•845
    @waldekglaz

    Hi You can check my solution to see how I tackled styling. I used Tailwind CSS. My solution

  • Waldemar Glaz•845
    @waldekglaz

    Hi Konstantin

    Instead of .background:hover{ opacity: .4; } Try setting background-color to rgba with opacity value, then your svg will have opacity: 1 and background will be semi transparent.

    I hope it helps.

    Cheers

    Marked as helpful
View more comments