Floating object positioning issues

Question

Hi,

I am having some issues positioning floating objects with Css.

I have made my Css code so that the floating object fits my phone perfectly, but when I open the code on computer/iPad with wider screens, the placement is totally off (it is supposed to be in center).

In my spesific case it is the «scoreId» text from the attached code. The reason it has to be floating is because it has to float over the webGL graphics.

I hope someone can help! Css is not my strongest side.. ;-)

Thanks in advance,
Joakim

https://code.sololearn.com/W9ajvdV2flmA/?ref=app

Answer 1

I found the solution I was looking for! I had to set position to fixed, and also if I modified the width I had to align the text to center (which was not obvious when background was transparent). I also had to use the transform function to center it (so the center of the object is positioned and not the corner of the object).

position: fixed;
left: 50%;
transform: translate(-50%, 0);
width:40%;
text-align:center;

(I have only centered it from left-right not from top-bottom)

Answer 2

Agent Thanks a lot!

Answer 3

Hi </JoakimNyland>

Having your page on all devices look good/similar is known as responsive design

Here is a youtube tutorial on responsive design:

https://youtu.be/9mQRsLQf3QU

What is responsive web design?:

https://www.w3schools.com/css/css_rwd_intro.asp

Making your web page responsive will make it look good on all devices

Answer 4

Agent However I think it has to be possible to fix it in center relative to screen.width somehow, without «changing the layout» when it reaches new width..