CSS issues on a Samsung Galaxy S3


#1

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!


#2

I found a solution to the price/select button not aligning vertically. I removed the col-center class and wrapped the inner content in a div.

HTML:

<div class="row">
    <div class="col ticket-price">
        <div class="ticket-price-inner">
            <span>$24.61</span>
            <div>
                <div class="button button-block button-balanced">
                    Select
                </div>
            </div>
        </div>
    </div>
    <div class="col ticket-information">
         <!-- the right column goes here -->  
    </div>
</div>

CSS:

.ticket-price {
    font-size: 20px;
    text-align: center;
    max-width: 130px;
    min-width: 130px;
    width: 130px;
    position: relative;
}

.ticket-price-inner {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform:translate(0, -50%);
    -moz-transform:translate(0, -50%);
    -o-transform:translate(0, -50%);
    display: block;
    width: 100%;
}