The text does not fit inside the button in IOS

Navigation
1

Hello. As pictured below, the button does not fit the text size in IOS only. Is there any parameter to increase the size of the button in IOS? (I would not want to have to change the buttons for DIVs).

I tried to increase the size of the button using the class below. The button gets bigger on Android and Windows. But in iOS the button remains small and cutting most of the text.

In html: 

 <button class="button">

In css: 

.button {
    padding: 15px 32px;
}

    
asked by anonymous 26.11.2018 / 15:44

1 answer

1

Add the -webkit-appearance: none; property on your button to remove the default iOS button style: 

.button{
   -webkit-appearance: none;
   padding: 15px 32px;
}

Before:

After:

Now,sothatthebuttondoesnothaveawhitebackgroundappearingnottobeabutton,youcanstyleitbyaddingagradientbackgroundcolor,forexample:

.button{-webkit-appearance:none;padding:15px32px;background:rgb(238,238,238);/*Oldbrowsers*/background:-moz-linear-gradient(top,rgba(238,238,238,1)0%,rgba(204,204,204,1)100%);/*FF3.6-15*/background:-webkit-linear-gradient(top,rgba(238,238,238,1)0%,rgba(204,204,204,1)100%);/*Chrome10-25,Safari5.1-6*/background:linear-gradient(tobottom,rgba(238,238,238,1)0%,rgba(204,204,204,1)100%);/*W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#cccccc',GradientType=0);/*IE6-9*/}

Itwilllooklikethis:

You can also use @media rules so that the button only loses the default style from a certain resolution while retaining the original style in desktop browsers. For example, until a resolution of 768px , the style is applied to the button: 

@media screen and (max-width: 768px){
   .button{
      -webkit-appearance: none;
      padding: 15px 32px;

      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
   }
}
  

One suggestion is to always style your buttons (put background color, borders,   shadows etc.) and do not leave it to the browser or OS because each   one stylizes differently. This way you have more control over   appearance of the buttons matching the theme of your site.

    
26.11.2018 / 15:55
Calculate values automatically How to hide fixed div in mobile?