Problème bootstrap débutant d-none et d-*-block [Fermé]

Signaler
-
Messages postés
1
Date d'inscription
dimanche 10 novembre 2019
Statut
Membre
Dernière intervention
10 novembre 2019
-
Bonjour,

Je pose ma question ici en dernier espoir car, après avoir chercher pendant assez longtemps, je n'ai trouvé personne pour m'aider (bien que ça doit être simple, je ne suis qu'un débutant :/)

Je voulais faire disparaître mon titre lors du passage en médium et j'ai utilisé d-md-block et block-none.

Le problème c'est que l'effet recherché ne s'effectue qu'en sm et qu'en md, mon titre prend l'équivalent de 12 cases...

Voici mon code: (je ne trouve pas le html, que xhtml, déso)
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="test1.css">
 <title>Test1</title>
</head>
<body>
 <div class="container-fluid no-padding">
   <div class="row entete no-padding">
          <div class="col-lg-2 d-none d-md-block"><img src="images/logo1.png" class="logo_entete" alt=""><strong>No Limit</strong></div>
          <div class="col-lg-6 hidden-sm-block"></div>
          <div class="col-lg-1 col-md-4 menu col-md-4">Accueil</div>
          <div class="col-lg-1 col-md-4 menu col-md-4">Profil</div>
          <div class="col-lg-1  col-md-4 menu col-md-4">Contact</div>
          <div class="col-lg-1 d-none d-md-block"></div>
        </div>
  <div>
   
  </div>
  
  <section class="section1">
   <div class="banniere row">
    <div class="col-lg-12 banniere_background">
     <video src="images/video_bg2.mp4" autoplay="autoplay" muted="muted" class="video_banniere" loop="loop"></video>
    </div>
   </div>
   <div class="title_banniere_div"><div class="title_banniere_div2"><h1 class="title_banniere">Browse.<br>Choose.<br>Customize.</h1></div></div>
   <div class="under_banniere"></div>
  </section>
  <section>
   <div>
    <div></div>
    <div></div>
    <div></div>
   </div>
  </section>
  <footer>
  
  </footer>
 </div>
</body>
</html>

et css:
/*color:
rgb(218, 220, 224) --> font
rgb(248, 249, 251) --> background
rgb(94, 98, 103) --> menu hover


*/

body
{
 margin: 0;
 padding-right:0;
 padding-left:0;
 color: rgb(179, 179, 179);
 background-color: rgb(248, 249, 251);
}

.no-padding > [class*='col-'] 
{
 padding-right:0;
 padding-left:0;
}

.entete
{
 border-bottom: 1px rgb(218, 220, 224) solid;
 box-shadow: 3px 0px 3px rgb(218, 220, 224);
 line-height: 50px;
 width: auto;
 padding: 0;
 margin: 0;
 margin: 0 -1.1%;
 background-color: white;
}

[class*="col-"]
{
 text-align: center;
 padding: 0;
}

.col-lg-offset-1
{
 margin-left: 8.33333333333%;
}

.col-lg-offset-5
{
 margin-left: 41.6666666667%;
}


.logo_entete
{
 max-width: 20%;
 margin-right: 3%;
}

.menu:hover
{
 color: rgb(94, 98, 103);
 cursor: pointer;
}

/*bannière*/

.banniere
{
 max-height: 300px;
 overflow: hidden;
}

.video_banniere
{
 width: 100%;
}

.section1
{
 position: relative;
}

.title_banniere_div
{
 position: absolute;
 transform: translateY(-50%);
 bottom: 0;
 width: 100%;
 display: flex;
 justify-content: center;
}

.title_banniere
{
 color: white;
 z-index: 1;
 margin: auto;
}

.under_banniere
{
 min-height: 20px;
 background-color: white;
 margin: 0 -1.1%;
 border-bottom: 1px rgb(218, 220, 224) solid;
 box-shadow: 3px 0px 3px rgb(218, 220, 224);
}

.d-none
{
 display: none;
}



EDIT : Ajout des BALISES DE CODE

Voilà, désolé d'avoir déranger et j'espère que vous pourrez m'aider. :(

2 réponses

Messages postés
30313
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 novembre 2020
3 022
Bonjour,
Je pense que tu dois utiliser :
d-none d-md-flex

Merci jordane pour ta réponse, mais il semble malheureusement que le problème persiste: le titre reste affiché en md mais est juste en mode flex...
Messages postés
160
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
22 mars 2020
25
Bonjour,

<div class="d-none d-lg-block">Cacher sur tous les écrans plus petits que lg</div>

Ou
<div class="d-md-none d-lg-block">Caché seulement sur md</div>

Messages postés
1
Date d'inscription
dimanche 10 novembre 2019
Statut
Membre
Dernière intervention
10 novembre 2019

Merci beaucoup pour ta réponse Seb1, mais je pense avoir mal exprimer mon problème, maintenant que je me suis inscris en tant que membre, je peux te montrer via l'image ci-suit:

Mon titre, "No Limit" est censé disparaître une fois passé en médium... Il n'en est rien et c'est la raison pour laquelle je pose ma question :(
Merci de m'avoir aidé en tout cas et, si vous trouvez le problème, je serai heureux de lire la solution. :D