Loading an text over an image without text moving when screen size changes

Question

Every time my screen size changes the text moves on the page, i want the text to load in one set place on the image, no matter what the sceen size is. My CSS looks like this.

form {position:absolute; left: 1233px;display:inline-block;z-index:80; top: 215;}

This loads it in the correct place on the screen.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

First of all it must be top: 215px, otherwise it's not working.

When dealing with responsive content you must use % instead of fixed px size.

form {    
    position: absolute;
    left: 50%;
    margin-left: -250px; // There must be fixed number: element width / 2
    display: inline-block;
    top: 10%;
    z-index: 80;
}

Loading an text over an image without text moving when screen size changes

Sign up