I have the following HTML-page:
<html>
<head><style>
* { margin: 0; padding: 0; border: none; }
button { width: 14px; background: #F00; }
</style></head>
<body>
<button></button>
<button></button>
<button></button>
</body>
</html>
When I run this code in any desktop browser, it works perfectly; the buttons are 14 pixels wide. When I run this code in Safari on an iPad, the buttons are wider. Is there some minimum width for buttons? Can this width be overridden?
That button cannot be removed, as its used to give you options to customize the rest of the Start Page how you see fit. Take a look over tips here: Customize your Safari settings on iPhone.
1) Click Safari > Preferences from the top menu bar. 2) Choose the General tab. 3) In the box next to Homepage, enter the URL of the website you want. If you are currently on that site, just click the Set Current Page button.
Just now encountered the same problem. I did small trial/research which showed that font-size affects horizontal paddings (both left and right).
So, to fix this - explicitly state padding: 0
or any other padding you require.
iOS 11.2, iOS 10.3.3
Answering my own question: apparently, the minimum width of <button> depends on the font size. So by setting the font size to 0, I can make the buttons smaller. I do realize that small buttons are not good when used on a touch-driven device like the iPad, so I'll probably create an alternate, more touch-friendly version of the UI.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With