1485 sujets

Web Mobile et responsive web design

[Résolu] Article externe non responsive sur site responsive..

Bonjour,

j'ai un problème sur un site responsive que je développe (j'utilise wordpress).

Je colle dans certaine page, des articles venant du site Scoop.it, seul problème, les articles ne sont pas responsive.

Ils se présentent de cette manière :

<div id='scoopit-container-referencedelarticle'><a href='lienverslarticle'>Titre de l'article</a></div><script type='text/javascript' src='http://www.scoop.it/embed-scoop/referencedelarticle.js'></script></div>


L'id de la div est externe à mon site, et le seul moyen de redimensionner la fenêtre de l'article c'est de mettre un " ?maxwidth " à la fin de l'url de la feuille JS..

Mais en responsive, l'article ne bouge pas, et j'aimerais qu'il soit lui aussi responsive..

J'ai tout essayer, rien ne marche, à chaque fois il ne reste que le lien de l'article, la parti JS disparaît..

Visuel de l'article en question :

http://img4.hostingpics.net/pics/229500visu.jpg

J'accepte toute solution (php, js..) ^^

Merci d'avance !
Modifié par AdrienSN (05 Nov 2013 - 11:23)
Hello Adrien,

Pour permettre de mieux comprendre le problème et d'aider, une page en ligne serait mieux qu'une image, ainsi que l'actuel output HTML généré par le script.

Cependant, il est fort probable que le code généré par le script soit une iframe avec les attributs height et width définis, il faut donc lui donner une largeur maximum en css (100% puisque ton conteneur est deja responsive).


  <div class="external-content">
    <iframe src="http://www.alsacreations.com" width="800" height="600"></iframe>
  </div>



.external-content iframe {
  max-width: 100%;
}


Voir l'exemple ici: http://cdpn.io/eaftK
Modifié par Sugarskill (02 Nov 2013 - 07:32)
Bonjour Sugarskill,

voici la page en question :

http://2013.proetco.fr/la-mef-du-pays-chaunois-recompensee-par-agefos-pme/

Ainsi que le code :

<div id='scoopit-container-4008566019'><a href='http://www.scoop.it/t/actu-rh-pro-co/p/4008566019/la-mef-du-pays-chaunois-recompensee-par-agefos-pme'>La MEF du pays Chaunois récompensée par AGEFOS PME</a></div><script type='text/javascript' src='http://www.scoop.it/embed-scoop/4008566019.js?maxwidth=618'></script></div>



Si je met 100% l'article devient une petite bande verticale..
Ah bah ca le probleme du mobile c'est que c'est réduit comme écran Smiley smile

Il y a une valeur width fixe en ligne, ajoutée par le JS de scoopit j'imagine dans la balise div #scoopit_post_xxxx. En CSS tu peux écrire par dessus avec:


.scoopit-embed-post {
    width: auto !important;
}


upload/51314-Picture2.png

Si tu trouves que c'est trop étroit, je te conseille de retravailler ton design et d'uiliser les media-queries pour le mobile, notamment en réduisant ou supprimant les marges extérieures qui sont assez importantes (sur un écran de 320px de large, la zone de lecture ne dépasse pas 235px, c'est vraiment pas beaucoup).
J'avais pas pensé à la largeur auto..

Je te remercie sincèrement SugerSkill, des fois c'est tout bête mais je cherche trop compliqué !!

Ok j'y penserai la fois prochaine, cette fois, sa a était validé donc c'est surtout pour une une raison de fonctionnement.

Merci encore et bonne journée à toi !
Sujet clos
Aller à