This my page http://books.portonvictor.org/repent/ when displaying on Android smartphones has very small checkboxes.

 

Also tooltip text font is wrong size.

 

Please help to enlarge checkboxes on phones and also make tooltips of correct size.

 

Here is an excerpt CSS from my site:

<style type="text/css">
body { background: white; color: black; font: 14pt arial, sans-serif }
div.ui-tooltip {
max-width: 600px;
font: 12pt arial, sans-serif
}
</style>
<!-- ... -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

Edited October 22, 20169 yr by porton

You re using point font sizes (which are for printing not websites). Try using em, rem or percent.

You re using point font sizes (which are for printing not websites). Try using em, rem or percent.

 

Please give an example.

You re using point font sizes (which are for printing not websites). Try using em, rem or percent.

 

I've tried

    <style type="text/css">
      body { background: white; color: black; font: 140% arial, sans-serif }
      div.ui-tooltip {
        max-width: 600px;
        font: 80% arial, sans-serif
      }
    </style>

This does not help against my problem.

input[type=checkbox] {

1. width: 30px;
   
2. height: 30px;
   

}

add this to css

Edited October 23, 20169 yr by YacaZG