I am trying to create a web based location based marker using Lat and Long Co-ords. To do this I am using A-frame and AR.js. The issue I am currently having is I can't seem to get the X axis to change but Y works fine.
Here is how I am styling my a frame elements
<a-scene
vr-mode-ui="enabled: false;"
arjs="sourceType: webcam; debugUIEnabled:false;"
embedded
>
<a-plane
position="0 0 0"
rotation="0 0 0"
width="50"
height="25"
color="#7BC8A4"
look-at="[gps-camera]"
gps-entity-place="latitude: 53.761385; longitude: -2.72117;">
</a-plane>
<a-image
position="0 0 0"
width="15"
height="15"
look-at="[gps-camera]"
src="images/building.png"
gps-entity-place="latitude: 53.761385; longitude: -2.72117;">
</a-image>
<a-text
position="-10 27.5 0"
value="C & T Building"
color="black"
width="100"
look-at="[gps-camera]"
gps-entity-place="latitude: 53.761385; longitude: -2.72117;">
</a-text>
<a-text
position="10 20 0"
value="900M"
color="black"
width="150"
look-at="[gps-camera]"
gps-entity-place="latitude: 53.761385; longitude: -2.72117;">
</a-text>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
Also any AR debugging advice would be good. Currently uploading the site to Netlify and then testing on my mobile.
The solution was the wrap the two <a-text>
tags in a <a-entity>
tag and the same for the <a-image>
tag