Pixel art not staying in correct place in HTML

Question

https://new.fiftyy.repl.co/

When the button is clicked, it changes animation (pressed down) however, the pixel art image is centered and should behave like this instead: https://scratch.mit.edu/projects/868967622/

The button changes from the top. However HTML does from the center. How do I solve this?

Sry if the question isn't clear. Thx in advance.

score 0 · Answer 1 · answered Jun 26 '23 at 15:48

You can position your item basing on the bottom of the screen instead of top of it. So change your code from

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%,-50%);
}

To

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    bottom: 5%; /*---- Change here ----*/
    left: 50%;
    transform: translate(-50%,-50%);
}

score 0 · Answer 2 · answered Jun 26 '23 at 15:59

#mainBtn {
    width: 115px;
    height: auto;
    position: absolute;
    bottom: 5%; /*---- Change here ----*/
    left: 50%;
    transform: translate(-50%, 5%);
}

You need to change the translate as you did mainbtn bottom.

Could you +1 if it worked for you?

Pixel art not staying in correct place in HTML

2 Answers2