Cacher un slide sur smartphone

Par Clément Guidon, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'ai ajouté un div class=hidden-xs pour le cacher sur smartphone, mais ca le cache sur tout types d'écran.

<div class=hidden-xs> <header id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <div class="fill" style="background-image:url('./images/slide');"></div> </div> </div> </div>

Auriez vous la solution ?
Merci d'avance.

18 réponses

Clément Guidon, il y a 7 ans

Merci de ta réponse, mais ca fait la même chose : ca le cache pour tout types d'écrans :/

Defy, il y a 7 ans

tu utilise bootstrap?

Clément Guidon, il y a 7 ans

Oui c'est bootstrap.

Defy, il y a 7 ans

essaie de mettre un .visible-md (je suis pas sur de la syntaxe) regarde dans la doc

Clément Guidon, il y a 7 ans

Je le met ou le .visible ?

Carouge10, il y a 7 ans

Bonjour,
Tu peux utiliser les media query en css pour afficher ou cacher ta div.

.caroussel { display: block; } @media screen and (max-width: 600px) { .caroussel { display: none; } }
Defy, il y a 7 ans

@Carouge10 il utilise bootstrap aucun intérer de venir surcharger des elements quand un framework te permet de le faire

@Clément Guidon il suffit de le rajouter dans la meme div que le hidden.

Clément Guidon, il y a 7 ans

@Defy merci de ta réponse, mais j'ai déjà essayé : ca cache mon slide sur smartphone, mais aussi sur tout autre type d'écrans.
Même quand je met le visible-lg, en enlevant le hidden-xs, le slide n'apparait plus sur grand écran...

Defy, il y a 7 ans

quel verions de bootstrap tu utilise?

si c'est bootstrap 3 voila une explication

Petit exemple:

<div class="container"> <div class="row"> <div class="col-md-4 col-xs-6 bordure"> <h1>1er bloc</h1> <p>Lorem ipsum dolor sit amet, eu quo aperiri definitionem. Et vis enim munere graece, eros solum vix no, assum dicant dictas mea ne.</p> </div> <div class="col-md-4 hidden-xs bordure"> <h1>2eme bloc</h1> <p>Usu elit admodum interpretaris no.</p> </div> <div class="col-md-4 col-xs-6 bordure"> <h1>3eme bloc</h1> <p>Veniam definitiones est et, qui no mazim quando. Eu eam case dissentiunt, eos minimum appetere praesent ea. Vim eros utinam at, putant oblique an eos. Iriure torquatos et his, pri id timeam persius.</p> </div> </div> </div>
Clément Guidon, il y a 7 ans

J'utilise bootstrap v3.3.4.
J'avais déjà vu ton lien :) mais ca ne m'explique pas pourquoi que je mette visible-lg et/ou hidden-xs, le slide disparait sur tout types d'écrans ???

Clément Guidon, il y a 7 ans

Voila le code qui ne fonctionne pas ( ca cache pour tout écrans ) :

<div class="col-lg-12 col-md-12 hidden-xs bordure"> 

<header id="myCarousel" class="carousel slide">

  <div class="carousel-inner">
      <div class="item active">
          <div class="fill" style="background-image:url('./images/slide');"></div>
      </div>
  </div>

    </div>

</header>

jchr, il y a 7 ans

Salut,
tu semble avoir oublié de fermer la balise header ;-) ce n'est sans doute pas ça qui cause le problème mais on sait jamais ;-)

De plus, ajoute ce css :

@media only screen and (min-width: 768px) { #madivquejedoiscacher { display: none!important; } }

et ça devrait marcher !
jc
PS : joue un petit peu sur la taille en pixel :-)

Clément Guidon, il y a 7 ans

Salut,
Merci de ta réponse, non le header est refermé plus bas ^^
Ca ne fonctionne toujours pas avec ton CSS : je laisse tomber :/

Lartak, il y a 7 ans

Merci de ta réponse, non le header est refermé plus bas ^^

C'est quand même une erreur, car dans la balise header tu y ferme plus de div que tu n'y en ouvre, ou alors tu y ferme la div qui contient la classe hidden-xs, alors qu'elle est ouverte en dehors du header.

TokaLazy, il y a 7 ans
@media (pointer: coarse) { /* code pour mobile et tablette */ }
Clément Guidon, il y a 7 ans

Je met quoi à la place de "code pour mobile et tabblette" ?
Merci de ta reponse

jchr, il y a 7 ans

Salut clément,
pour faire plus simple test ce code :

<div class="col-lg-12 col-md-12 hidden-xs bordure"> <header id="myCarousel" class="carousel slide"> <div id="carousel-a-cacher-sur-tel" > <div class="carousel-inner"> <div class="item active"> <div class="fill" style="background-image:url('./images/slide');"></div> </div> </div> </div> </div>

et dans le style:

@media only screen and (min-width: 768px) { #carousel-a-cacher-sur-tel { display: none!important; //si tu as d'autres règles que tu veux rajouter } }

ca devrait marcher car ca répare le problème des div et le header qui sont mal fermés
Par contre, c'est toujours mieux de ne pas utiliser un id pour un truc aussi générique (cacher une div) mais ce sont des détails ;-)

jc

Clément Guidon, il y a 7 ans

ca marche, je te remercie !