CODEWITHSUNDEEP
csshtmlipadresponsive-design
user3861559
user3861559

Reputation: 993

Rendering of html button in ipad

I am building a responsive site and I ran into this issue with ipad. The submit buttons I have are rendered differently in ipad.

The issue I have so far are:

  1. Buttons have lot more radius in ipad than in other devices. I fixed it by adding

    -webkit-appearance: none;

  2. The buttons are shorter than they are in other devices. As seen in the image, the orange button is truncated. I haven't been able to figure out a fix for it. Is there a way I can fix it?

enter image description here

CSS:

.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-appearance: none;
 border-radius:10px;
 border: none;
 display:inline-block;
 cursor:pointer;
 color:#fff;
 font-size:18px;
 margin-right: 10px;
 padding:0 24px;
 text-decoration:none;
}

.try.button{
background-color:#fc6a06;
width:120px;
}
.buy.button{
background-color:#79c14d;
width:100px;
}

I could fix it by increasing the button width. But the issue I am facing is button width of 150px is smaller than the button with 150px on android tab.

Upvotes: 0

Views: 849

Answers (1)

starvator
starvator

Reputation: 1017

150px is 150px, no matter what.

My guess is your font size is changing, from the sample code, it was not provided. Try defining and using a web-safe font with a predetermined size.

For example, try defining 

.button {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
...
}

Upvotes: 3

Related Questions