La vue mobile pour les appareils Netlify ne fonctionne pas correctement

Question

Le CSS de ce site fonctionne bien sur mon ordinateur, comme dans la version de bureau et la version mobile créée avec des requêtes multimédias, mais lorsque je le consulte sur un appareil mobile, le CSS cesse de fonctionner. Lien du site Web : https://lightheart-basbousa-3c2db6.netlify.app/, lien du dépôt https://github.com/hetyug04/portfolioV7. Il est hébergé sur Netlify mais je n'ai jamais eu de problèmes avec lui auparavant. Voici la vue mobile sur mon téléphone

Answer 1

Votre CSS s'exécute sur des tailles d'écran plus petites.

En utilisant les outils de développement du navigateur, je peux voir que vous avez une requête multimédia avec display: none sur la classe d'introduction. Cela affecte les écrans inférieurs ou égaux à 1015 pixels. Si vous modifiez ou supprimez une requête multimédia, votre sortie changera.

Je ne sais pas pourquoi il existe et si sa suppression résoudra complètement votre problème, mais vérifier cela devrait être votre première étape.

Il existe d'autres problèmes comme le débordement et la largeur incorrecte, vous voudrez peut-être consulter l'Approche de conception mobile d'abord.

Answer 2

J'ai résolu le problème, apparemment c'était parce que j'avais imbriqué les styles CSS dans la feuille de style et une fois les styles désimbriqués, le CSS a commencé à fonctionner sur les navigateurs mobiles