Salut, sur mobile et sur pc le compte à rebours s'affiche différemment. Voir img ci-après. comment faire avec du CSS pour que la version horizontale s'affiche également sur mobile et pas l'autres.

Bonjour,

Merci de nous donner les codes HTML et CSS, avec le bouton </> !

Utilises-tu les media queries pour changer les propriétés (largeur des div, taille de la police...) pour une petite largeur du viewport ? 

Sur la page d'accueil tu peut voir le compte à rebours : https://www.vapeprivate.com/. Sinon en fait moi sur wordrpress j'ai un espace pour ajouter du css additionnel. Il faudrait un bout de css simple qui désactive l'option mobile des media queries sur le compte à rebours

Je crois avoir trouvé, ça se passe ligne 25381 de style.css

il faut neutraliser "width: 50% !important", qui force chaque élément à prendre 50% de la largeur

donc correction ainsi :

  .elm-countdown .countdown-section {
    /* width: 50% !important; */
  }

Cette déclaration est incluse dans un media queries ligne 25269 :

@media (max-width: 767px) {

quand on neutralise la ligne, les éléments du compte à rebours restent à 25% de la largeur du parent comme pour les largeurs supérieures à 767px

j'ai rentré cette correction est on dirais que ça bloque 

-
Edité par VictorBonomie-amort 11 décembre 2021 à 17:24:34

non tu n'as pas compris

il faut au contraire ne pas fixer la largeur des éléments à 50%, sinon tu en as 2 par ligne, 

Si tu ne peux pas accéder au fichier style.css et faire la correction que je t'ai indiquée (qui consiste à commentariser la déclaration pour la neutraliser), alors il va falloir appeler ton propre css APRÈS l'appel de style.css, et écrire :

.elm-countdown .countdown-section {
  width: 25% !important;
}

pour que cette déclaration annule la déclaration de la ligne 25381 

Je ne sais pas si c'est moi qui saisie mal quelque chose mais ça bouge toujours pas

où se trouve ce fichier css qui contient ta modif, et comment s'appelle-t-il ?

je regarde le code source de la page, je vois bien l'appel à style.css, ligne 178 du code source

(de plus, peut-être qu'il faut préciser les media queries)

tu ne peux pas modifier le fichier style.css directement ?

Si mais je le trouve pas il y a tellement de fichier quand j'ouvre file zila

ok c'est le fichier suivant :

https://www.vapeprivate.com/wp-content/themes/airi/style.css?ver=1.0

et ensuite la ligne 25381 qui est :

  .elm-countdown .countdown-section {
    width: 50% !important;
  }

devient :

.elm-countdown .countdown-section {
  /* width: 50% !important; */
}

du coup, la déclaration sera ignorée et pour toutes les largeurs on gardera une largeur = 25%, donc 4 éléments par ligne

bien joué ça marche nickel !!!! 

Bien joué pour toi !

Passe le sujet en "résolu", s'il te plait

Remarque : j'ai utilisé l'inspecteur web de mon navigateur pour la page en question, ce qui m'a permis facilement de voir qu'il y avait deux déclarations pour countdown-section, l'un avec 25% et l'autre avec 50% de largeur, et il m'a affiché les lignes du/des fichiers CSS concernés, à partir de là tout est simple, et j'ai même pu en neutralisant la ligne des 50% voir le résultat immédiatement dans mon navigateur.

ah oui l'inspecteur permet cela. je m'en servirais mieux à l'avenir :). merci encore