Icônes tactiles sur mobile ...

Bonjour à vous,

en fait, j'ai une page pour gérer un stock.

Sur cette page, on a la possibilité de cliquer sur des icônes dont la fonctionnalité est de modifier et supprimer des articles.

Sur laptop, on arrive facilement à cliquer sur les icônes.

Par contre, sur mobile, la zone de l'icône sur laquelle ça réagit est très minime. Il est très dur de faire réagir les icônes tactilement.

Avez-vous une idée ?

Merci d'avance.

Bonne journée,
Thierry
Modifié par THIRT05 (08 Apr 2022 - 18:41)

Agrandir la zone réactive sur mobile...

Bonjour,

Google Search Console conseille une dimension de 48x48 pixels pour les icônes. C'est le message que j'ai eu en erreur sur la version mobile d'un site. Ça me parait grand, mais je n'ai plus de messages d'erreurs depuis. Je vois pourtant dans les transports un maximum de mobiles dont les icône sont plus petites.
Tu sais ce qu'il te reste à faire.

J'ajouterais que si ce sont des éléments cliquables, il faut que ces icônes soient dans des liens <a> ou des boutons <button>

Bonjour à vous,

tout d'abord, je tenais à vous remercier pour vos réponse à mon message.

En effet, 48 X 48 me paraît grand pour une version mobile mais s'il fait faire comme cela pour que ça réagisse correctement, on le fera.

Par rapport aux éléments cliquables, il s'agit bien de boutons.

Voici mon code HTML et CSS :

<td data-column="&nbsp;" class="product-action-icon exclude-pseudo-before icons-length">
    <button class="btn-icon">
        <span id="enable_fields" class="enable-fields">
          <i class="small material-icons tooltipped" data-position="top" data-tooltip="Modifier">create</i>
        </span>
        <span id="update_product" class="update-product">
            <i class="small material-icons tooltipped" data-position="top" data-tooltip="Sauver">save</i>
        </span>
    </button>
    <button id="btn_visibility_delete" class="btn-icon">
        <span class='delete_product'>
            <i class="small material-icons tooltipped" data-position="top" data-tooltip="Supprimer">delete</i>
        </span>
    </button>
</td>

td, th {
    display: block;
    position: relative;
    margin: 1px 0;
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 24%;
    height: 30px;
    font-size: 10px;
    border: none
}

button, input, optgroup, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
}

.btn-icon {
    padding: 0;
    margin: 0 5px;
    display: inline-block;
    background-color: transparent;
    border: none;
    vertical-align: middle;
    font-size: 25px;
    color: #000;
    cursor: pointer;
}

i.small {
    font-size: 25px;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

Merci d'avance pour votre aide et vos conseils.

Bon week-end,
Thierry