3D Text different positioning across different devices - 8th Wall and A-Frame

Question

I have here an image tracking component, the problem I'm having is when I scan the image, the EAT MORE ART 3d text positioning is off between different devices, finding a way to figure out the viewport or the size of the screen and go position the text from there. Already tried adjusting it manually but seems to be different for different devices (Desktop, apple and android)

const videoAnimateComponent = {
  schema: {
    name: {type: 'string'},
    video: {type: 'string'},
    thumb: {type: 'string'},
    canstop: {type: 'bool'},
    bgPaint: {type: 'selector'},
  },
  init() {
    console.log('initialize')
    const {object3D} = this.el
    const {name} = this.data
    const v = document.querySelector(this.data.video)
    const {bgPaint} = this.data
    const eatText = document.getElementById('EAT')
    const moreText = document.getElementById('MORE')
    const artText = document.getElementById('ART')
    const camera = document.querySelector('a-camera') || document.querySelector('[camera]')

    const {el} = this

    const showImage = ({detail}) => {
      if (name != detail.name) {
        return
      }
      const newScale = detail.scale * 1
      const newYScale = newScale * 0.1
      el.setAttribute('material', 'src', v)
      v.play()
      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, newYScale, detail.scale)
      object3D.visible = true

      if (this.data.bgPaint) {
        const bgPaintPosition = {x: 0, y: 0, z: -5}
        this.data.bgPaint.object3D.position.set(bgPaintPosition.x, bgPaintPosition.y, bgPaintPosition.z)
        this.data.bgPaint.object3D.parent = camera.object3D
        this.data.bgPaint.object3D.visible = true
      }
      bgPaint.setAttribute('animation', {
        property: 'scale',
        to: `5 5 5`,
        dur: 1000,
        easing: 'easeOutElastic',
      })

      eatText.object3D.position.set(detail.position.x - 0.5, detail.position.y + 0.8, detail.position.z + .05)
      moreText.object3D.position.set(detail.position.x - 0.8, detail.position.y + 0.4, detail.position.z + .05)
      artText.object3D.position.set(detail.position.x - 0.5, detail.position.y - 0.2, detail.position.z + .05)
      eatText.object3D.quaternion.copy(detail.rotation)
      moreText.object3D.quaternion.copy(detail.rotation)
      artText.object3D.quaternion.copy(detail.rotation)
      eatText.object3D.visible = true
      moreText.object3D.visible = true
      artText.object3D.visible = true

      eatText.setAttribute('animation', {
        property: 'scale',
        to: '1 1 1',
        easing: 'easeOutElastic',
        dur: 1000,
      })

      moreText.setAttribute('animation', {
        property: 'scale',
        to: '1 1 1',
        easing: 'easeOutElastic',
        dur: 1000,
      })

      artText.setAttribute('animation', {
        property: 'scale',
        to: '1 1 1',
        easing: 'easeOutElastic',
        dur: 1000,
      })
    }

    const hideImage = ({detail}) => {
      if (name != detail.name) {
        return
      }
      v.pause()

      eatText.removeAttribute('animation')
      moreText.removeAttribute('animation')
      artText.removeAttribute('animation')

      eatText.object3D.visible = false
      moreText.object3D.visible = false
      artText.object3D.visible = false
      object3D.visible = false

      eatText.setAttribute('scale', '0 0 0')
      moreText.setAttribute('scale', '0 0 0')
      artText.setAttribute('scale', '0 0 0')
    }

    const updateImage = ({detail}) => {
      const newScale = detail.scale * 1
      const newYScale = newScale * 0.75

      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, newYScale, detail.scale)

      eatText.object3D.position.set(detail.position.x - 0.5, detail.position.y + 0.8, detail.position.z + .05)
      moreText.object3D.position.set(detail.position.x - 0.8, detail.position.y + 0.2, detail.position.z + .05)
      artText.object3D.position.set(detail.position.x - 0.5, detail.position.y - 0.4, detail.position.z + .05)
      eatText.object3D.quaternion.copy(detail.rotation)
      moreText.object3D.quaternion.copy(detail.rotation)
      artText.object3D.quaternion.copy(detail.rotation)
    }

    this.el.sceneEl.addEventListener('xrimagefound', showImage)
    this.el.sceneEl.addEventListener('xrimageupdated', updateImage)
    this.el.sceneEl.addEventListener('xrimagelost', hideImage)
  },
}

export {videoAnimateComponent}