Question 194552 in Html Question posted in
Some basic documentation can be found here.

Pixel art not staying in correct place in HTML

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.

Tags:

2

Answers


  1. 0

    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%);
}
    Login or Signup to reply.
  2. 0 
    #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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search