Réglage positionnement élément en fonction taille écran

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Réglage positionnement élément en fonction taille écran

Message par sunshinette Jeu 17 Mar 2022 - 0:14

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sunshinette.forumactif.com/

Description du problème

Bonsoir,

J'en appelle à votre aide et votre savoir en codage afin de me dépatouiller de mon petit soucis. Je souhaiterais que l'élément de switch dark/light qui est sur l'image du dessus soit bien positionner pour tous les types d'écrans comme ceci : https://i.ibb.co/Mn7dLLr/renduok.png

Je n'arrive pas à le faire garder sur la même ligne que mon switcheroo ... Je ne comprends pas pourquoi il ne veut pas se fixer comme les éléments à côté. J'ai suivis à la lettre le tuto ici https://bigbadwxlf.tumblr.com/post/650705863717404672/tuto-dark-light-mode-pour-passer-du-th%C3%A8me-de mais pas moyen de régler le positionnement pour que cela fonctionne correctement.

Sur mon écran de pc portable il est bien mit, mais sur mon téléphone ou sur mon deuxième écran qui est un peu plus grand et plus carré, il se déplace.

Merci à la personne qui viendra à mon secours Very Happy
sunshinette

sunshinette
***

Féminin
Messages : 158
Inscrit(e) le : 27/01/2012

https://sunshinette.forumactif.com/
sunshinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglage positionnement élément en fonction taille écran

Message par Toryudo Jeu 17 Mar 2022 - 11:56

Bonjour !
Alors, ce que vous allez devoir faire cette fois, c'est modifier la position du code correspondant à <div class="theme-switch-wrapper">. Tout cette partie, vous allez la déplacer à l'intérieur de <div id="mm-navbar"> (juste avant sa fermeture par exemple).

Ensuite, il vous reste à modifier le CSS de .theme-switch-wrapper comme ceci :
Code:
.theme-switch-wrapper {
  top: 66px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 999;
  right: 10px;
}

Et il s'adaptera maintenant à tous les écrans !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1566
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réglage positionnement élément en fonction taille écran

Message par sunshinette Jeu 17 Mar 2022 - 12:34

Bonjour,

Merci beaucoup pour votre aide, votre solution marche parfaitement bien ! Je pensais bien qu'il fallait que je déplace le code dans le template mais je n'avais pas réussi à mettre la main sur le bon emplacement. Merci encore pour le coup de main très efficace Very Happy Very Happy
sunshinette

sunshinette
***

Féminin
Messages : 158
Inscrit(e) le : 27/01/2012

https://sunshinette.forumactif.com/
sunshinette a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum