28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je viens de passer un site en multilangue https://sweetalpaga.com/en/
Le switch de langue qui fonctionne bien sur un ordinateur mais il est invisible sur un smartphone ?
Je pense avoir compris qu'il est masqué sur les petits écrans
class="col-sm-4 hidden-xs"

Comment faire pour supprimer cette limitation. je ne vois pas comment enlever ce code simplement car il est généré par le template
A+
Modifié par _laurent (02 Oct 2020 - 13:28)
Modérateur
Bonjour,

Dans la feuille de style /templates/ja_megastore/local/css/themes/sweetalpaga/bootstrap.css, il y a
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

Je n'ai pas tout vérifié mais a priori, c'est ça qui cache tes drapeaux.

Si tu mets dans une feuille de style personnalisée (tu devrais avoir cette possibilité) :
@media (max-width: 767px) {
    .t3-topbar .col-sm-4.hidden-xs {
    display: block !important;
  }
}
... ça devrait faire réapparaitre tes drapeaux.

Mais il va falloir vérifier ensuite que ça tienne bien sur la ligne où ils sont affichés (et a priori, ça ne tiendra pas donc va falloir aussi modifier le style de ce qu'il y sur cette ligne).

Et aussi il faudra vérifier qu'il n'y a pas d'autres endroits où des éléments réapparaissent alors que ce n'est pas souhaité (là, par contre, je ne pense pas que ce soit le cas, mais il faudra vérifier quand même).

Amicalement,
Bonjour,
Merci à vous.
J'ai mis le code conseillé par @parsimonhi
Malheureusement même après avoir vidé cache serveur et navigateur, cela n'a pas l'air d'être pris en compte.
Je ne sais pas comment contrôler si c'est bien chargé sur un smartphone , vu que je travaille sur ... ordi
Peut-être attendre encore un peu, si cache au niveau de l’hébergeur!?
@+
Modérateur
Bonjour,

Quand on réduit la largeur de la fenêtre du navigateur d'un ordinateur de bureau, les drapeaux disparaissent aussi. Ça permet de vérifier si une modification est prise en compte ou pas.

J'ai essayé la modification que j'ai proposée, via l'inspecteur du navigateur, en changeant le display de l'élément de classe .col-sm-4 et .hidden-xs contenu dans la barre du haut de classe .t3-topbar

J'ai bien vu les drapeaux réapparaitre.

Amicalement,

EDIT: pour forcer la prise en compte d'un changement dans une feuille de style, il faut appuyer sur la touche "majuscule" en même temps que l'on clique sur l'icône qui recharge la page.
Modifié par parsimonhi (02 Oct 2020 - 15:45)
Rebonjour,
j'ai bien ajouté le code dans custom.css
En ligne, je ne le vois pas
sweetalpaga.com/templates/ja_megastore/css/custom.css

J'ai pourtant vidé le cache navigateur (firefox), celui de joomla.
C'est pour cela que je me demande si cela ne met pas un peu de temps!
A moins que tu le vois de ton côté sans examiner l'élément !?
Modérateur
Bonjour,

Si tu as ajouté le css que j'ai donné dans custom.css et si tu as téléversé ce fichier sur le site qui est en ligne, on devrait le voir quand on affiche le code de la page et qu'on clique sur la ligne où est custom.css.

Or on ne voit pas le css que j'ai donné dans le code de ce fichier en ligne. Le téléversement n'a pas fonctionné comme attendu.

Amicalement,