0
votes

Requête médiatique ne fonctionne pas - cacher un div sur mobile

Je construis une page Web simple simple où je veux masquer un div sur mobile comme suivant .Rectangle-ordinateur portable code> Pour afficher Aucun sur mobile et avoir une image d'arrière-plan couvre l'écran entier sur mobile Au lieu de cela, alors qu'il est sur une taille mobile, mais pour le moment, la requête des médias ne semble pas fonctionner, pouvez-vous aider?

p>

<div class="container">

        <div class="mobile-banner" style="position: relative;">

        <div style="text-align:center">
          <div  class="dot" ><h4>Melrose</h4><p>this sleek slab-styled kitchen allows you to mix and match both colour and texture.</p></div>
             <div>

                <div style="text-align:center">


                  <div class="rectangle-laptop" >
                   </div>
              <div class = "rectangle-vertical-container" >
                <span class="rectangle-vertical-1" ></span>
                <span class="rectangle-vertical-2"></span>
                <span class="rectangle-vertical-3"></span>
              </div>
            </div>
            </div>



            </div>


4 commentaires

Vous avez .Rectangle-grand {} dans votre CSS, mais .Rectangle-ordinateur portable dans votre HTML.


Bonjour @AmaRyuryHanser Merci d'avoir tapé ça! Je l'ai réparé mais la requête médiatique ne fait toujours pas le tour ...


@alie Avez-vous vérifié la typographie Double citation sur votre CSS? S'il vous plaît voir ma réponse ci-dessous ...


salut @emwai oui, j'ai supprimé ça et son travail maintenant! J'ai juste besoin d'ajouter


3 Réponses :


3
votes

Les requêtes de média doivent être placées après les règles ordinaires CSS, sinon elles seront écrasées par les règles ordinaires (qui s'appliquent à toutes les tailles ), comme dans votre cas.


1 commentaires

salut @johannes qui est extrêmement utile! Merci, mais je l'ai changé au fond du code CSS, ne fait toujours pas le tour ...



0
votes

Placez votre requête de support au bas de CSS normal et utilisez cette requête multimédia pour les appareils mobiles

@media only screen and (max-width: 768px) {
  .rectangle-laptop{
     display: none !important;
   }
}


5 commentaires

@alie, je pense que votre fichier CSS pourrait avoir un certain problème. Formatage approprié du fichier et vérifier les choses manquantes


HI THW Mise en forme est bien, je dois juste ajouter


@alie oh! C'est la partie principale que vous avez oubliée.


Oui! Mais merci pour vos informations à ce sujet :))


@alie mon plaisir :)



0
votes

C'est @MeMedia Seulement écran et (max-largeur: 767px) {} et il y a une faute de frappe sur cette ligne:


.Rectangle-Vertical-Conteneur {Position: Relatif; Marge-Haut: -9rem; "}

Supprimer la double citation avant votre fermeture }


0 commentaires