q-layout-footer not spaced evenly on ipad pro



  • I have a q-layout-footer menu which looks equally spaced when using chrome and setting it to Ipad view, but when I set it to Ipad Pro the icons are all left aligned.

    <!-- Mobile menu on bottom -->
        <q-layout-footer class="mobile-only fixed-bottom">
          <q-tabs color="green" inverted class="footer-menu">
            <q-route-tab
              icon="fal fa-user-alt fa-md"
              to="/overview"
              label="Profile"
              exact
              slot="title"
            />
            <q-route-tab
              icon="fal fa-users fa-md"
              to="/sharing"
              label="Care Team"
              exact
              slot="title"
            />
            <q-route-tab
              icon="fal fa-file-signature fa-md"
              to="/documents"
              label="Documents"
              exact
              slot="title"
            />
          </q-tabs>
        </q-layout-footer>
    

    Ipad clearly has some styling applied with a media query max of 991px
    0_1541179269517_ef89a25d-9cd9-4eab-aaf1-c842340d725d-image.png

    Ipad Pro clearly has the styling removed b/c the width is larger than 991px.
    0_1541179366067_6fad576e-8124-4b0a-9892-ccc5ed5ec812-image.png

    Is this media query max of 991 done or purpose??