Skip to content
OverviewSolutions
24
Comments
8
Randall3475
@Randall3475

All comments

  • Randall3475•360
    @Randall3475

    Hello!

    How do you make these pixel perfect? I follow every value provided in the Figma file, but in the end it's still not pixel perfect.

    What's your secret?

    Thanks!

  • Randall3475•360
    @Randall3475

    Nice organization of files!

  • Randall3475•360
    @Randall3475

    You did a very good job!

  • Randall3475•360
    @Randall3475

    Hello, the @use and @forward methods - as of now - only work in Dart Sass, which is the version of Sass that includes all newer features.

    More on Dart Sass here: Sass: Dart Sass

    Marked as helpful
  • Randall3475•360
    @Randall3475

    Hello Deniz, you are using explicit heights and widths, these are not responsive, therefore causing your elements to overflow (flow out of their container).

    It is preferred to use max- and min heights or widths.

    Here's an awesome article on this

  • Randall3475•360
    @Randall3475

    Hello, you should use relative values on your background-position property. Meaning, the position will adjust based on the viewport of your screen. The calc function is a good way to do this. Here's an example:

    background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), 
left calc(40vw + 25%) top calc(72vh - 10vw);

    The first calc instance is taking 47vw units and adds 15% of whatever the current screen size is to it, resulting in a dynamic position.

    Finding out the right values can be tricky. You might have to play around with it.

    Marked as helpful
  • Randall3475•360
    @Randall3475

    The flicker happens, because as soon as the screen reaches 670px, you put a transition and a translateX on the nav. This should not be an issue, because when you visit your site on a small screen - for example on a mobile - the browser would already render your nav element with the styles appropriate for the screen size, hence the style change does not happen and there would be no flickering. You could also observe this behaviour on big sites even.

    Marked as helpful
  • Randall3475•360
    @Randall3475

    Looking slick! If Snap was a Web3 website. What do you use to create your images? Are you doing it by yourself or perhaps using some kind of AI image generation tool?