Forum : Cacher un slide sur smartphone

Réponse acceptée

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

Auteur

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

Defy

tu utilise bootstrap?

Clément Guidon

Auteur

Oui c'est bootstrap.

Defy

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

Clément Guidon

Auteur

Je le met ou le .visible ?

Carouge10

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

@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

Auteur

@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

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

Auteur

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

Auteur

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

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

Auteur

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

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

@media (pointer: coarse) {
    /* code pour mobile et tablette */
}

Clément Guidon

Auteur

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

Clément Guidon

Auteur

ca marche, je te remercie !

Cacher un slide sur smartphone

18 réponses