Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ Les Langages Du Web _ Bandeau foncé

Écrit par : claire04 26 Jul 2020, 15:27

Bonjour, je me suis servie d'un template pour créer un site. Sur ordinateur les photos de la page d'accueil sont normales. Plus on lit le site sur petits écrans (smartphone et tablette) plus le bandeau apparaît foncé sur le bas des photos.
Comment supprimer ce bandeau foncé uniquement sur smartphone et tablette (il apparaît un peu moins sur tablette car écran un peu plus grand que smartphone).

Écrit par : g4hd 26 Jul 2020, 18:44

Citation (claire04 @ 26 Jul 2020, 16:27) *
… le bandeau apparaît foncé sur le bas des 3 grandes photos. S'agit-il des 3 points de défilement des photos ?


http://www.mairie-arlebosc.fr
En effet, ce n'est visible que sur un petit écran de smarthone.
Pas sur iPad, écran plus grand.


Écrit par : scoch 27 Jul 2020, 13:01

Bonjour,
dans style.css, lignes 1626 à 1631, sur le sélecteur .owl-carousel-fullwidth .item > a:after, supprimer box-shadow (et les versions préfixées).

Écrit par : claire04 27 Jul 2020, 16:15

Merci pour la réponse

Écrit par : scoch 27 Jul 2020, 16:32

Ce sont les déclarations qui utilisent les vendor prefixes pour maximiser la compatibilité. Quelques explications sur https://developer.mozilla.org/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeu.

Aux lignes indiquées, tu trouveras ces déclarations CSS :

Code
-webkit-box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.75);
box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.75);


Au passage, tu remarqueras que le code de box-shadow est en double… Sans doute un oubli ?

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)