Problème ajustement du site en fonction de la résolution
Fermé
ANXRq
-
14 juin 2019 à 12:38
AstaLaVista1908 Messages postés 85 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 16 juillet 2019 - 14 juin 2019 à 17:25
AstaLaVista1908 Messages postés 85 Date d'inscription mercredi 24 septembre 2014 Statut Membre Dernière intervention 16 juillet 2019 - 14 juin 2019 à 17:25
A voir également:
- Problème ajustement du site en fonction de la résolution
- Site de telechargement - Guide
- Site de vente en ligne particulier - Guide
- Fonction si et - Guide
- Site inaccessible - Guide
- Site de partage de photos - Guide
3 réponses
AstaLaVista1908
Messages postés
85
Date d'inscription
mercredi 24 septembre 2014
Statut
Membre
Dernière intervention
16 juillet 2019
33
14 juin 2019 à 13:57
14 juin 2019 à 13:57
Hello,
En HTML/CSS tu peux utiliser les media queries pour optimiser ton affichage en fonction des tailles d'écran.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
En HTML/CSS tu peux utiliser les media queries pour optimiser ton affichage en fonction des tailles d'écran.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Après différents essaies, ce code la fonctionne toujours ?
[class*="col-"]
{
float: left;
padding: 15px;
}
@media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
[class*="col-"]
{
float: left;
padding: 15px;
}
@media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
AstaLaVista1908
Messages postés
85
Date d'inscription
mercredi 24 septembre 2014
Statut
Membre
Dernière intervention
16 juillet 2019
33
14 juin 2019 à 17:25
14 juin 2019 à 17:25
Salut,
Oui ton code fonctionne, fait juste gaffe, là ton code est appliqué lorsque ta page internet fait plus que 768 px.
Si tu veux faire l'inverse et que ce soit lorsque ta page internet fait moins que 768px il faut mettre (max-width:768px)
Oui ton code fonctionne, fait juste gaffe, là ton code est appliqué lorsque ta page internet fait plus que 768 px.
Si tu veux faire l'inverse et que ce soit lorsque ta page internet fait moins que 768px il faut mettre (max-width:768px)
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
14 juin 2019 à 15:10
14 juin 2019 à 15:10
Bonjour,
Déjà.. à l'avenir, merci de poster ton code correctement sur le forum
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite...
1 - As tu vidé le cache de ton navigateur ?
2 - Quel est le code HTML qui va avec ce CSS ? (sans oublier de nous fournir TOUT le HTML/CSS qui est chargé dans ta page au cas où il y aurait d'éventuels conflits )
Déjà.. à l'avenir, merci de poster ton code correctement sur le forum
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite...
1 - As tu vidé le cache de ton navigateur ?
2 - Quel est le code HTML qui va avec ce CSS ? (sans oublier de nous fournir TOUT le HTML/CSS qui est chargé dans ta page au cas où il y aurait d'éventuels conflits )
14 juin 2019 à 14:08