Kevin Powell - Community•5mo ago

Help with finishing touches on this "FrontEndMentor" project? Few small bugs.

https://snazzy-tiramisu-4033f2.netlify.app/ 1. Strange line on the left when Night-time desktop Background Image is loaded(BG applies between 18:00-05:00) 2. Refresh Quote button dips few pixels down on being pressed 3. "More" section is supposed to have this strange blur effect that I don't know how to make (Figma pictures included) 4.Background picture seems less detailed and more streched in my project compared to Figma file. Am I applying it in the wrong way? 5. Any recommendation on how to make "quote" have width:fit-content; animation on refresh, or is it impossible?

5 Replies

MarkBoots•5mo ago

1. the line on the left of the bg image is from the image itself

MarkBoots•5mo ago

2. It doesn't dip, but it scales down

.refresh-quote-btn:active {
  transform: scale(0.8);

.refresh-quote-btn:active {
  transform: scale(0.8);

3. You can do that with backdrop-filter . Click on the eye-icon at Effect - Background Blur in figma to see the amount of pixels

main {
  backdrop-filter: blur(10px);
}

main {
  backdrop-filter: blur(10px);
}

4. try background-size: cover Or it can just be that the actual screen size is different from the figma file. not much you can do about that if you want to fill the whole screen. 5. that's difficult. you would have to calculate the size of the new text before actually placing it on the page. then maybe try to animate the max-width to that value. (not sure if it will work)

Dovah•5mo ago

2. If you click it it gets like a margin for a split second, I don't think it is connected to the :active part 3.YUP, it worked! Thanks! 4.It is on cover, and yeah, could be that I'm just focusing on the wrong size. 5.Okay, that is what I though. I was just wondering if there was an easy way where it just does it itself. xD Either way I'm satysfied with the effect I placed so it's okayish Thanks for the answers!

clevermissfox•5mo ago

1. The scale property will make other content jump around as your item gets bigger or smaller so button gets more space around it since the size is smaller, does that make sense? Optimizing images for production is very important too

Dovah•5mo ago

Yeah I understand that, but it only happens when I apply this class to it with JS

  .refreshAnimation {
    animation: rotateIn 500ms ease;
    }
    @keyframes rotateIn {
        100% {
            transform: rotate(180deg);
        }
    }

  .refreshAnimation {
    animation: rotateIn 500ms ease;
    }
    @keyframes rotateIn {
        100% {
            transform: rotate(180deg);
        }
    }

Gaming

Programming

Help with finishing touches on this "FrontEndMentor" project? Few small bugs.