Grid does not display properly

Question

I use KoGrid to represent data. At first it looks like this:

When I rotate the phone or tab, the grid will display correctly, but I could not figure out how to solve this problem:

Has anyone encountered this problem?

My Javascript:

var vm = {
    myObsArray: ko.observableArray([
        { firstName: 'John', lastName: 'Doe' },
        { firstName: 'Jane', lastName: 'Doe' },
        { firstName: 'Jane', lastName: 'Doe' }
    ])
};
ko.applyBindings(vm, document.getElementById("vm"));

Html:

<div id="vm">
    <h3>Size (<span data-bind="text: myObsArray().length"></span>)</h3>
    <div class="gridStyle" data-bind="koGrid: { data: myObsArray }"></div>
</div>

This is a simple example that I found here . Also, I used jquery mobile (1.4) with this

Answer 1

You must write css3 media queries to correct the display of the data table in the portrait view of a mobile phone or tablet.