+ 8

Floating object positioning issues

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

10th Jul 2018, 8:37 PM
Joakim Nyland
Joakim Nyland - avatar
4 odpowiedzi
+ 7
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)
11th Jul 2018, 4:22 PM
Joakim Nyland
Joakim Nyland - avatar
+ 6
Agent Thanks a lot!
11th Jul 2018, 5:30 AM
Joakim Nyland
Joakim Nyland - avatar
+ 5
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
10th Jul 2018, 10:13 PM
Agent
Agent - avatar
+ 5
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..
11th Jul 2018, 6:02 AM
Joakim Nyland
Joakim Nyland - avatar