I’m having a few issues with my app on a Samsung galaxy S3. I have seen these issues on an actual device and on an emulator. This is only happening on the S3, other android devices & iOS both look fine. It renders correctly at first and then it adjusts the page and everything looks wrong.
Here is how it looks on the S3:
and here it is correctly on an iPhone 5:
I changed the width of the divs to use a pixel value instead of a percentage but I’m still not sure why the percentage wouldn’t work.
I haven’t found a solution to vertically aligning the price + select column. It is currently using col-center. I removed most of the markup but this is the relevant part:
<div class="row">
<div class="col col-center ticket-price">
<span>$24.61</span>
<div>
<div class="button button-block button-balanced">
Select
</div>
</div>
</div>
<div class="col ticket-information">
<!-- the right column goes here -->
</div>
</div>
The ticket-price class contains:
.ticket-price {
font-size: 20px;
text-align: center;
max-width: 130px;
min-width: 130px;
width: 130px;
}
Thank you in advance for any suggestions/help!