Skip to content
OverviewSolutions
39
Comments
9
P
Waldemar Glaz
@waldekglaz

All comments

  • P
    Nishanth Venkatesan•790
    @nishanth1596Submitted about 19 hours ago
    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
    P
    Waldemar Glaz•845
    @waldekglazPosted about 19 hours ago

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

    Marked as helpful
    1
  • P
    turtlewords•120
    @TurtlewordsSubmitted about 20 hours ago
    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
    P
    Waldemar Glaz•845
    @waldekglazPosted about 19 hours ago

    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.

    0
  • P
    Waldemar Glaz•845
    @waldekglazPosted about 1 year ago

    hey @pohyongzhi

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

    Good job

    Marked as helpful
    1
  • P
    Waldemar Glaz•845
    @waldekglazPosted almost 2 years ago

    Hi

    It looks good.

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

    Marked as helpful
    1
  • P
    Waldemar Glaz•845
    @waldekglazPosted almost 2 years ago

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

    0
  • P
    Waldemar Glaz•845
    @waldekglazPosted over 2 years ago

    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
    0
  • P
    Waldemar Glaz•845
    @waldekglazPosted over 2 years ago

    Hi Sheldon,

    Very nice work, I am on it at the moment as well. I went different way and instead of using Router I just went with conditional rendering.

    I've noticed two things: 1.that some of the flags are cropped, because of the different size of the images ( I used fixed height of images to sort it out) 2. In the detail page try to get Border Countries full names based on country code. (I've spent some time to figure it out 😊 )

    I hope you will check my solution when ready (should finish it tomorrow) and give me some advice too.

    Have a good day

    @waldekglaz

    0
  • P
    Waldemar Glaz•845
    @waldekglazPosted almost 3 years ago

    Hi Ophelie Dimensions are available in figma / sketch files if you hold pro account On mobile try width 343px and 540px on desktop

    0
  • P
    Waldemar Glaz•845
    @waldekglazPosted over 3 years ago

    Hi, I just finished the same challenge and I used <a> instead of <button> and I think you did good job and I need to change mine.

    stackoverflow

    1