Bonjour sur ma mosaique d'image j'ai un responsive j'aimerai savoir comment faire pour avoir 10 image par ligne au fur à mesure que j'agrandissent la page
Modifié par MaximeK (29 Mar 2019 - 10:47)
<!DOCTYPE html>
<html>
<head>
<title>Mosaique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="refresh" content="8">
<meta charset="utf-8">
</head>
<!-- LES CHANNELS -->
<body>
<div class="wrapper"></div>
<div id="modal" class="w3-modal">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span>
<!-- Le contenu de la modal -->
<div id="videoid" class="w3-modal-content w3-animate-zoom">
<iframe id="video" width="560" height="560" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script src="javascript/script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
html, body{
padding:0;
margin:0;
width: 100%;
}
/* --TOUTE LA PARTIE CSS-- */
.wrapper {
display:grid;
grid-template-columns: 0fr 0fr 0fr 0fr;
cursor: pointer;
}
#video {
display:block;
width: 100%;
position: relative;
}
.img-wrapper {
position:relative;
}
/*-- Nom des chaines par images --*/
.text {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:center;
display: block;
position:absolute;
left: 5%;
bottom: 80%;
font-size: 170%;
font-family: fantasy;
letter-spacing: 5px;
}
/*-- La modal --*/
.w3-modal {
width: 100%;
padding-top: 10%;
background-color: rgba(0,0,0,0.4);
}
.video {
width: 475.75px;
height: 251px;
}
/*-- LE RESPONSIVE-- */
@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(4, 0fr);
}
}
@media all and (max-width:3426px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2835px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2358px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:1915px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr;
}
}
@media all and (max-width:1438px) {
.wrapper {
grid-template-columns: 0fr 0fr;
}
}
@media all and (max-width:964px) {
.wrapper {
grid-template-columns: 0fr;
}
}
Modifié par MaximeK (29 Mar 2019 - 10:47)