AFrame / AR.js Positioning - Can not get the X axis to change

Question

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.

Answer 1

The solution was the wrap the two <a-text> tags in a <a-entity> tag and the same for the <a-image> tag