1481 sujets

Web Mobile et responsive web design

Bonjour à tous, depuis longtemps je lis ce site, jai appris pas mal de trucs dessus et il m'a sauvé quelques exam' lors de ma formation de développeur web ^_^

Si je saute le pas de l'inscription et du post aujourd'hui, c'est que je suis bloqué depuis plusieurs jours face à un problème.

Un peu de contexte :
J'aide une personne à passer son site en responsive.
Ce dernier est un portfolio et se compose quasi uniquement du duo HTML/CSS (un peu
de JS mais uniquement pour un effet de parallaxe trouvé sur Codepen)
Il a été codé par quelqu'un d'autre et mon boulot est juste de corriger le responsive ayant été
mal implémenté, ou fait à moitié selon les pages.

Le problème :
Le travail que j'ai effectué s'affiche sans problème dans mon navigateur avec l'outil inspecter
(chromium), mais lorsque je quitte cet outil et que je joue avec la fenêtre sur différents écrans
les éléments ne sont plus correctement positionnés, même si j'utilise une résolution avec
laquelle il n'y avait aucun souci dans l'outil inspecter...
Cela fait 4j que je tourne en rond sur ce souci et je commence à devenir fou Smiley biggol

Je vous joint ici le lien du repo : Lien effacé Smiley smile
Je travail pour l'instant uniquement sur la page d’accueil, donc les fichiers index.html et style.css

Merci pour ceux qui prendront le temps de me lire. Smiley smile

Bonne journée/soirée/nuit !
Modifié par Eaudaim (08 Oct 2022 - 18:50)
Problème trouvé, il s'agissait des media queries dans lesquelles était mélangés des
 @media (min-device-width: 768px) and (max-device-width: 959px) {}
et des
@media (min-width: 501px) and (max-width: 767px) {}
ce qui foutait le bordel !
La solution a été de tout passer en
 (min-width:) and (max-width: )

Par ailleurs, j'ai aussi trouvé quelques informations disant que ces soucis peuvent aussi provenir du fait que les devtools de chrome émulent les résolutions mobiles, ce qui donne aussi parfois des différences de positionnement entre ce qui est affiché dans les devtools et un appareil réel.
Si jamais ça peut donner une piste au prochains qui passeront sur ce sujet dans le futur Smiley smile