Fil d'ariane à ne pas afficher pour petits écrans ?

[philouseb]

Bonjour,

J'ai un léger soucis, je viens d'installer un fil d'ariane sur mon site et j'aime le faire disparaitre pour des raisons esthétique en fonction des résolutions d'écran ou pour les navigations mobile.

Et cela en Css si c'est possible, avez vous une idée de comment faire ?

Merci d'avance

 

[spout]

Avec les media queries, en caché par défaut et display dans le @media (min-width: xxxxpx) { ....

 

[philouseb]

J'ai essayé en mettant les infos dans le css mais ça marche pas.
Faut il faire autre chose.

Pourrais tu me décrire point par point ce qu'il faut faire ?

Merci d'avance

 

[-Romu-]

Tu es sur que ton css et bien chargé ? (media="screen)

 

[philouseb]

Je fais des test hors ligne, mais oui il est chargé.

Voilà ce que j'ai mis pour l'affichage :

}
@media screen and (max-width: 420px) {
.breadcrumbs {
display: none;
}


Et voici le style du Fil d'Ariane :

#breadcrumbs{
background: #222;
margin: 0 -30px;
padding-right:30px;
padding-left:30px;
padding-top:5px;
padding-bottom:5px;
color: #7f7f7f;
font-family: Helvetica Nue, Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 11pt;
letter-spacing: 1px;
text-transform: uppercase;
}

Je ne suis intervenu dans le CSS général du site et cela ne fonctionne pas.
Je cherche... Mais ne trouve pas pour le moment.

Merci de votre aide

 

[spout]

http://codepen.io/anon/pen/bCsrE

 

[philouseb]

Merci mais cela ne fonctionne toujours pas ?!?

Mon fil d'ariane est placé dans ma page header avec cela :

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Dans ton exemple le Breadcrumbs est dans une DIV est ce que cela peut interférer ?
Merci

 

[spout]

Ça change rien avec <p> ou id: http://codepen.io/anon/pen/dJmux
Maintenant tu ne montres pas non plus le code final généré.

 

[philouseb]

Je refais un test dès que possible.

Merci encore

 

[philouseb]

Ca marche nickel !!

Merci encore

 

[PaulDAF]

http://codepen.io/anon/pen/bCsrE

Thanks!

 

[Koxin-L.fr]

... sauf que dans la logique ce que l'on ne souhaite pas afficher sur mobile pour des raisons de taille d'écran, ne doit pas non plus être chargé pour des raison de connexion. ;-)

Le masquage, c'est juste un pansement, pas une solution.