Différences entre versions de « Listes de prêts et réservation responsive »
De WIKI-BOKEH
(2 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
Voici le code qui permet de transformer les tableaux de la zone "Mon compte" en liste afin d'avoir un meilleur affichage sur les terminaux mobiles | Voici le code qui permet de transformer les tableaux de la zone "Mon compte" en liste afin d'avoir un meilleur affichage sur les terminaux mobiles | ||
− | Avant ajout des lignes CSS | + | |
+ | ===Avant ajout des lignes CSS=== | ||
[[Fichier:avantgrid.png]] | [[Fichier:avantgrid.png]] | ||
− | Après ajout des ligne CSS | + | ===Après ajout des ligne CSS=== |
[[Fichier:apresgrid.png]] | [[Fichier:apresgrid.png]] | ||
+ | |||
+ | |||
+ | ===Lignes à recopier dans votre éditeur CSS=== | ||
<pre>@media screen and (max-device-width: 1024px) { | <pre>@media screen and (max-device-width: 1024px) { | ||
Ligne 50 : | Ligne 54 : | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
[[Catégorie:CSS]] | [[Catégorie:CSS]] |
Version actuelle datée du 11 mai 2021 à 11:32
Voici le code qui permet de transformer les tableaux de la zone "Mon compte" en liste afin d'avoir un meilleur affichage sur les terminaux mobiles
Avant ajout des lignes CSS[ ]
Après ajout des ligne CSS[ ]
Lignes à recopier dans votre éditeur CSS[ ]
@media screen and (max-device-width: 1024px) { /*responsive tableaux compte lecteur*/ /*démentellement du tableau et centrage des textes*/ #borrower_loans tbody, table.reservations tbody, .tablesorter-default tbody { display: grid; text-align:center; } /* transformation des colonnes du tableau en lignes*/ #borrower_loans tbody tr, table.reservations tbody tr, .tablesorter-default tbody tr { width: auto; display: inline-grid; } /*centrer le nom de l'auteur dans liste réservation*/ table.reservations td:nth-child(5) { text-align: center; } /*centrer les images dans les fiches de prêts et réservations*/ #borrower_loans tbody img, table.reservations tbody img, #borrower_loans tbody .nothumbnail_wrapper, table.reservations tbody .nothumbnail_wrapper { width: 50% !important; margin: 0 auto; } /* désactive la règle ci dessus sur l'image de désinscription*/ table.reservations tbody a img { width:auto!important; } /*masquer les entêtes de tableaux*/ .tablesorter-headerRow { display: none; } /*centrer nom de l'emprunteur et réservataire*/ table.loans td:first-child, table.reservations td:first-child { width: auto; } }