Erreur liée à la requête @Media.
mon code HTML - et ceci est mon CSS - J'essaie la carte Div pour définir "Marge: Auto;" sur mobile mais cela ne fonctionne pas. J'ai aussi ajouté en tête de tête. S'il vous plaît suggérer moi. Et maintenant, je passe des tests réactifs sur la console de développeur Chrome et Firefox. Y a-t-il de meilleurs moyens de tester? Merci.
3 Réponses :
remplacer @media (max-largeur: 700) avec @Media écran et (max-largeur: 700)
Désolé, j'ai oublié que vous devez mettre px à la fin de la largeur, donc max-largeur: 700px
Ajoutez ceci dans votre balise de tête
<meta name="viewport" content="width=device-width, initial-scale=1">
La requête multimédia semble bien, vous pouvez passer à l'écran @Media et (max-largeur: 680px)
en chrome, lorsque vous inspectez l'élément "Barre d'outils de la barre de périphérique" est disponible. Vous pouvez voir comment l'application examine différents périphériques ainsi que l'application est réactive ou non.` p>
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
</body>
</html>