Media Queries non pris en compte via l'iframe

[Xin-Yao]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

Je suis actuellement en train de travailler sur un nouveau design pour mon forum & je rencontre un petit soucis. En effet, j'utilise une page html que j'insère dans le template overall_header via iframe, afin que le contenu n'entre pas en conflit avec un autre (plus précisément, car j'utilise plusieurs "tableaux" à onglets).

Jusque là tout va bien, sauf que les media queries ne semblent pas être prises en compte par mon forum (je me demande si c'est pas une histoire de priorité, ou quelque chose comme ça). J'utilise plus précisément @media screen afin que la PA s'adapte à l'écran du visiteur (en l'occurrence, qu'elle rétrécisse), mais après plusieurs essais, ça ne marche pas. Quand je prévisualise ma page html depuis l'outil "gestion des pages HTML", tout est ok. En revanche, une fois en pratique (et donc, une fois que ça passe par l'iframe placée dans la template), ça ne marche plus.

Si quelqu'un avait une réponse, ou un début de réponse, je suis preneuse ! Je vous remercie par avance de l'attention portée à mon problème.

[Neptunia]

Bonjour ^^


Une iframe sert à intégrer une autre page à l'intérieur de la page en cours sans qu'on ne puisse modifier la page initiale.
Si vous voulez modifier le contenu de l'iframe il faut donc modifier la page initiale, par exemple en y intégrant le code css voulu.

[Xin-Yao]

Bonsoir & merci d'avoir répondu !

En fait, tout est dans la page HTML que j'ai créé : le CSS, le JS et le contenu, donc. ^^ Et quand je prévisualise depuis l'éditeur HTML tout est ok, c'est une fois en pratique (donc, sur le forum) que ce n'est plus pris en compte.

[Xin-Yao]

Nevermind, j'ai trouvé la solution !

Je la mets ici pour ceux qui rencontreraient le même problème:
Puisque le contenu qu'on cherche à rendre responsive via les media queries (et dans ce cas précis, @media screen avec un min-width) se trouve dans l'iframe, il faut que le width de l'iframe soit de la même valeur que le min-width afin que les media queries soient pris en compte !

Dans mon cas, j'ai du faire : @media screen and (max-width: XXXpx) and (min-width: XXXpx) {
iframe.NOMDEL'IFRAME {
width: XXXpx; *valeur de votre min-width, ou de la valeur à partir de laquelle vous voulez un changement*
}}

Problème résolu donc ! Je remercie Neptune d'avoir été si rapide à répondre !