<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
Ensuite, pour s'adapter à la taille d'écran différent, nous pouvons utiliser la syntaxe :
@media only screen and (max-width:400px) {
//CSS pour un comportement inférieur à 400px
}
Voici un exemple de comportement (pensez à redimentionner votre écran)
@media only screen and (max-width:400px) {
.row {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
position: relative;
padding: 5px;
max-height:none;
}
h1{
display : none;
}
}
➽ fichier pour test