Skip to content
OverviewSolutions
57
Comments
7
Sam
@JustANipple

All comments

  • ptrwilk•420
    @ptrwilkSubmitted over 1 year ago

    Unfortunately to change ellipsis(three dots) color on hover I had to create a separate .svg file that contains fill:white. Is there a better way of change ellipsis color without the need of creating dedicated file ?

    Time tracking dashboard - React TS, MUI

    1
    Sam•970
    @JustANipplePosted over 1 year ago

    Hi PTRWILK, Good job for completing this challenge!

    To make ellipsis white, you can just use the filter rule to make the image brigther.

    filter: brigthness(value); - work with values until you've found what you need

    That will cause the element to look "white"

    I hope this helps

    Marked as helpful
    1
  • Sam•970
    @JustANipplePosted over 1 year ago

    Complimenti per la challenge! L'idea aggiuntiva secondo me è molto bella e il blocco calza bene con il resto del design

    1
  • ezecoder•870
    @3eze3Submitted over 1 year ago

    I really liked this project, and I also wanted to experiment with some perspective effect when displaying the letter, you know if you have any suggestions and how to improve my code you can tell me by commenting, happy coding.

    Interactive Card Rating (Scss/Js) 🧡

    3
    Sam•970
    @JustANipplePosted over 1 year ago

    The backface animation is something i will steal from you. I didn't know that was possible until now.

    For a smoother experience, you could give your buttons a transition, but it might be personal taste

    Nice work!

    2
  • Sam•970
    @JustANipplePosted over 1 year ago

    Hi Akisheva, you've done a very good job for this challenge!

    To solve the accessibility reports, just change your qr-component element from "div" to "main" and trying always having everything in an header, nav, main or footer. This makes it simpler for screen reader users to go through your website.

    It might be something you don't want in this challenge, but it will become useful in the future

    Also, to center your div you can use a "display: grid" and "place-content: center" on the body element

    I hope this helps! Keep on going!

    0
  • Sam•970
    @JustANipplePosted almost 2 years ago

    Hi Tanvir. This is awesome! Spacing between the text blocks are perfect. Where did you learn that spacing technique?

    0
  • Chris•710
    @Chris-2811Submitted almost 2 years ago

    Hi guys,

    I'am struggling with the mobile version quite a bit, especially with the container dimensions padding right is not working and the content is overflowing. Does anyone know how I can fix this problem? Thank You !

    Product_Preview_Card_Component

    1
    Sam•970
    @JustANipplePosted almost 2 years ago

    Hi Chris! Your content is overflowing because you're setting a fixed width, so the content is not breaking until it gets to the border of that width, that is overflowing the mobile view. You could set a max-width and then the block will resize to keep the content visible. Delete the .card-right {width: 50%} and the block will be responsive Remove the "/" before the img link and it will show up live

    0
  • bociKond•150
    @bociKondSubmitted almost 2 years ago

    I didn't figure out how to get the time left to stay right, but now typing this I guess I could've used grid instead of flex

    nft-preview-card-component-main

    1
    Sam•970
    @JustANipplePosted almost 2 years ago

    Hi Bocikond, nice work! For your time, you have everything in place, you just need to add "justify-content: space-between" in your .price-time class. that will cause the two items to have as much space as possible between them, making time stick to the right

    Marked as helpful
    1