@media (souci d'affichage)

[Cosmic]

Bonjour
je ne comprends pas très bien, je n'arrive plus à organiser correctement mes CSS avec l'option @media

voici la page: https://test.smilecollector.photos/f...mic-tribune-fr

@media (min-width:900px) and (max-width:1200px) { 
section#topbar-section-551539321230222 {
z-index: 10;
}
.flexi.group.description, div#astroid-column-1528971561366 {
transform: rotate(-1deg);
padding-right:150px;
padding-left:150px;
margin-top: -75px !important;
margin-bottom:50px;
}
section.newspaper {
-webkit-column-count:2; /* Opera, Safari, Google Chrome */
-moz-column-count: 2; /* Firefox */
column-count: 2; /* Internet Explorer */
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
-webkit-column-rule: 2px dashed #555;
-moz-column-rule: 2px dashed #555;
column-rule: 2px dashed #555;
}
div#up-786-3 {
break-before: column;
-webkit-column-break-before: always;
}
}

@media (min-width:1201px) and (max-width:1600px) {
section#topbar-section-551539321230222 {
z-index: 10;
}
.flexi.group.description, div#astroid-column-1528971561366 {
transform: rotate(-1deg);
padding-right:150px;
padding-left:150px;
margin-top: -75px !important;
margin-bottom:50px;
}
section.newspaper {
-webkit-column-count:3; /* Opera, Safari, Google Chrome */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Internet Explorer */
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
-webkit-column-rule: 2px dashed #555;
-moz-column-rule: 2px dashed #555;
column-rule: 2px dashed #555;
}
div#up-786-3 {
break-before: column;
-webkit-column-break-before: always;
}
}

@media (min-width: 1601px) { 
section#topbar-section-551539321230222 {
z-index: 10;
}
.flexi.group.description , div#astroid-column-1528971561366 {
transform: rotate(-3deg);
padding-right:150px;
padding-left:150px;
margin-top: -75px !important;
margin-bottom:50px;
}
section.newspaper {
-webkit-column-count:4; /* Opera, Safari, Google Chrome */
-moz-column-count: 4; /* Firefox */
column-count: 4; /* Internet Explorer */
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
-webkit-column-rule: 2px dashed #555;
-moz-column-rule: 2px dashed #555;
column-rule: 2px dashed #555;
}
div#up-786-3 {
break-before: column;
-webkit-column-break-before: always;
}
}

je suis dessus depuis ce matin et je n'arrive plus à comprendre ce que je fais...
quelqu'un aurait-il une idée en y jetant un coup d'oeil avec des yeux frais

[Tortue Genial 69]

hello,

désolé mais qu'est-ce que tu entends exactement par "organiser correctement" ?
je suis tatillons, mais c'est pour bien comprendre

moi je serais toi je retirerai toutes les classes et je les remettraient les unes après les autres.

[Cosmic]

pour le moment, j'ai ce "media" qui ne fonctionne pas: @media (min-width:900px) and (max-width:1200px) mais quand je colle cette partie dans l'inspecteur, tout fonctionne

je me dis donc qu'il y a peut-être un ordre pour indiquer ces lignes...

[lefabdu51]

qu est ce qui ne fonctionnes pas ? toutes les regles de la requete?

[Cosmic]

le plus flagrant, c'est la mise sur deux colonnes

section.newspaper { -webkit-column-count:2; /* Opera, Safari, Google Chrome */ -moz-column-count: 2; /* Firefox */ column-count: 2; /* Internet Explorer */ -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; -webkit-column-rule: 2px dashed #555; -moz-column-rule: 2px dashed #555; column-rule: 2px dashed #555; }

ça passe directement sur une seule colonne

j'ai essayé de mettre des "!important" aussi mais sans succès
et ce que je trouve bizarre c'est que si je mets tout dans l'inspecteur, ça fonctionne

[lefabdu51]

tu a tésté sur yous les navigateurs?

[Cosmic]

j'ai des soucis identiques sur Chrome (mon navigateur par défaut), Brave et Firefox