1
Je suis en train de suivre un cours et je me suis coincé à l'un de mes devoirs. Je suis censé utiliser des requêtes média pour rendre le site responsive et surtout ça fonctionne comme prévu, mais quand j'arrive à une certaine valeur, mon texte disparaît .. Il arrive à la largeur de la fenêtre 680px à 690px et je n'ai aucune idée. Il devrait être couvert par la déclaration @media (max-width: 700px), n'est-ce pas? Et mon css fonctionne avec toutes les autres largeurs de fenêtre très bien .. Des idées?Le texte disparaît lors du redimensionnement de la fenêtre
/**
* GENERAL
*/
html {
\t box-sizing: border-box;
}
*, *:before, *:after {
\t box-sizing: inherit;
}
/* clearfix */
.group:before,
.group:after { content: " "; display: table; }
.group:after { clear: both; }
body {
\t color: #2f2f2f;
\t font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif;
\t padding: 1.4em;
\t max-width: 100%;
}
p {
\t margin: 0;
}
img {
\t max-width: 100%;
\t height: auto;
}
.container {
\t max-width: 960px;
\t margin: 0 auto;
}
article {
\t width: 31.25%; /*width: 300px;*/
\t float: left;
\t margin: 0 1.04%; /*margin: 0 10px;*/
}
.text {
\t text-align: center;
}
@media (max-width: 1010px) {
\t body {
\t \t font-size: 0.85em;
\t \t line-height: 1.28em;
\t \t padding: 1em;
\t }
\t h3 {
\t \t font-size: 1.05em;
\t \t margin: 0.7em;
\t }
}
@media (max-width: 940px) {
\t body {
\t \t font-size: 0.75em;
\t \t line-height: 1.13em;
\t \t padding: 0.5em;
\t }
\t h3 {
\t \t margin: 0.25em 0;
\t \t font-size: 1em;
\t }
}
@media (max-width: 780px) {
\t article {
\t \t float: none;
\t \t width: 100%;
\t \t height: 200px;
\t \t overflow: hidden;
\t \t margin: 0 0 2.55% 0;
\t }
\t .image {
\t \t display: inline-block;
\t \t vertical-align: middle;
\t }
\t .text {
\t \t display: inline-block;
\t \t max-width: 55%;
\t \t vertical-align: middle;
\t }
}
@media (max-width: 700px) {
\t article {
\t \t position: relative;
\t \t width: 300px;
\t \t margin: 10px auto;
\t }
\t .image, .text {
\t \t display: block;
\t }
\t .text {
\t \t position: absolute;
\t \t bottom: 0;
\t \t left: 0;
\t \t max-width: none;
\t \t background: rgba(255, 255, 255, 0.5);
\t \t color: #444;
\t \t font-size: 0.75em;
\t \t z-index: 2;
\t }
\t h3 {
\t \t color: #323232;
\t }
\t .image {
\t \t position: absolute;
\t \t top: 0;
\t \t left: 0;
\t \t z-index: 1;
\t }
}<div class="container group">
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Fionna</h3>
\t \t \t \t <p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p>
\t \t \t </div>
\t \t </article>
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Peppermint Butler</h3>
\t \t \t \t <p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p>
\t \t \t </div>
\t \t </article>
\t \t <article>
\t \t \t <header class="image">
\t \t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess">
\t \t \t </header>
\t \t \t <div class="text">
\t \t \t \t <h3>Flame Princess</h3>
\t \t \t \t <p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily.
\t \t \t \t <p>
\t \t \t </div>
\t \t </article>
\t </div>
et apparemment, comme je l'ai publié ce billet, le texte disparaît à des valeurs de largeur un peu différentes, mais pas trop différente .. comme quelque part autour de 700px .. Je ne comprends pas du tout –