View getting pushed to right of screen for bigger screens


I am working on an Ionic Application where for normal sized screens i.e. most smartphones, smaller tablets the view looks perfect (well centered)

However once the screen size gets bigger (large ipad) the view seems to stick to the right

In the image you can see the space on the left. In my index.html where this view enters from I’m using a simple <ion-nav-view></ion-nav-view> and my main html file has a simple format of


The main thing to note is that this shifting to the right happens for all pages in the App for large screens only. Anyone know the solution please?

Update: Seems to be happening on a few large screen devices, not all large screen devices, one such device in question is an Ipad Mini 1st Gen 9.3.5


Any specific reason for using ion-pane? Furthermore, can you provide a codepen example. It will be difficult to make anything out of the pictures


It’s all pages experiencing the problem, some don’t have ion-pane, a simple button in a page will be shifted. Here’s my index.html


    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


    <link href="css/ionicons.css" rel="stylesheet">

    <!-- compiled css output -->
    <link href="css/hint.css" rel="stylesheet">
    <link href="css/" rel="stylesheet">

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/services.js"></script>
    <script src="js/filters.js"></script>
    <script src="lib/ionic/js/collide.js"></script>
    <script src="lib/ionic/js/ionic.tdcards.js"></script>

<body ng-app="starter">


And a page has a format of: