Le code Twitter vous donne la pâte dans le HTML ressemble à ceci: Ils vous permettent de définir une hauteur, que je défini sur 600. Lorsqu'il est placé sur mon site, je reçois cela (Lors de la visualisation de la source): La largeur de 220 est ce qui me tue. Je veux que la largeur soit la pleine largeur du conteneur, qui est 100% (pour un site mobile). Actuellement, la largeur de 220 est un peu plus que à mi-chemin de la page et affiche une barre de défilement laide. Alors, pourquoi est-ce que cela réglait la largeur sur 220 et comment puis-je l'amener à se développer à sa largeur mère?
14 Réponses :
Essayez de changer largeur = "220" à largeur = "100%" .
Ouais, j'aimerais aimer. Mais c'est généré automatiquement du code de Twitter. Ils injectaient la largeur de 220 pour une raison quelconque.
À droite mais une fois que vous l'avez, vous pouvez modifier la valeur que c'est le code qu'ils vous donnent de coller dans la page. juste nous tout éditeur, par exemple le bloc-notes pour le modifier
Non, le premier bit de code dans mon message est ce qu'ils vous donnent - le début avec
OK je vois. Sur le dessus de ma tête, je ne sais pas un moyen autour de cela. Meilleur attendez-vous si vous obtenez une réponse de s / o familière avec l'API
Cela a fonctionné pour moi ...
#twitter-widget-6{
width:600px;
}
Twitter par défaut a un .tiMeline {max-largeur: 520px; largeur maximale. Donc, l'iframe sera de 600 px largeur mais dans l'iframe, le contenu sera de 520px largeur. En surchargeant le style directement dans l'iframe, vous redéfinissez la classe de la chronologie et vous pouvez aller au-delà de la limite de 520 px.
J'utilise un thème réactif et ce code CSS fonctionne bien. Merci Hjuster.
#twitter-widget-0 {
width: 100% !important;
}
Mise à jour du 25 juin 2015 Il semble que Twitter ait changé le code. Cette fois, ils ont défini la max-largeur du widget à l'intérieur de l'iframe (c'est-à-dire sur le code généré de leur site Web)
Vous pouvez modifier la largeur du widget en définissant sa valeur dans la définition de classe "Twitter-Timeline", comme mentionné ici:
https://dev.twitter.com/docs/embedded-timelines
Par exemple, un widget de chronologie Twitter avec largeur 280 et la hauteur 300 est quelque chose du long des lignes de: < / p>
Mais cela signifie-t-il que cela acceptera également un pourcentage au lieu d'une largeur absolue?
J'ai essayé de définir une valeur en% telle que 10%, par exemple, mais ne semble pas fonctionner comme prévu. Toute valeur contenant un pourcentage fera sa largeur devenue environ 500 pixels.
#twitter-widget-6 {
width:600px;
}
The above works, I presume the numbers correspond with how many widgets you've created.
Is the width the only thing we can change, what about fonts, I cant seems to change this?
The Twitter widget is so ugly it's hard to make it sit nicely in any layout.
Twitter vous permet de régler la largeur et la hauteur du widget de la chronologie via des attributs de largeur et de hauteur HTML, mais la largeur minimale qu'elles acceptent est de Twitters Developers Page : la largeur minimale d'une chronologie est 220px et le maximum est 520px. La hauteur minimale est de 350px . 220 pixels Exemple: largeur = "220" , hauteur = "350"
Je devais utiliser la classe Twitter-Timeline-rendu au lieu de l'ID # Twitter-widget-0. De cette façon, le widget est redimensionné après le rendu.
.twitter-timeline-rendered {
width: 100% !important;
}
Avez-vous stylé le lien initial ou le widget rendu en quelque sorte?
Si nous placons en dessous de CSS, nous pouvons définir la largeur du widget en fonction de l'exigence.
<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style>
Si vous utilisez simplement
<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>
Ceci est le moyen correct et actuel de mettre à jour la hauteur. Il doit être sur une balise au travail.
Cela fonctionne pour moi:
.twitter-timeline {
height: 180px !important;
width: 100% !important;
}
J'ai essayé toutes les réponses ci-dessus, mais pas de chance,
ainsi implémentée sous le code moi-même et travaillé pour moi
Merci pour votre message, c'est m'a aidé. Je peux accepter cela si une autre requête a été effacée. $ ('# twitter-widget-0') ici "0" valeur statique, je tiens à charger cette valeur de manière dynamique, car elles ont donné plus de boutons, lorsqu'ils cliquent sur Plus, les éléments se chargeront, mais ce style ne s'applique pas à ces éléments BCZ C'est Statica One. Alors s'il vous plaît suggérer moi à ce sujet.
Voici comment je l'ai fait, en utilisant presque la même logique que Chandrakant a utilisé pour insérer le style dans l'iframe .
Tout d'abord: ajoutez le widget Twitter de la manière appropriée p> maintenant, vous avez une belle fenêtre.TWTTR._e matrice qui peut contenir tout ce qui sera exécuté une fois le widget Twitter .js est chargé. p> Notez que j'ai ajouté js.async = true; em> p> Vous pouvez maintenant dans le même script ou ensuite faire: P > <script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>
avec la mise à jour récente (ou la visser) Twitter a forcé tous les widgets d'alimentation pour afficher automatiquement les images sur la chargement, quelle que soit les options définies dans les paramètres Twitter.
Maintenant, j'utilise leur propre flux de widget dans un site basé sur HTML et souhaitez désactiver les images du chargement. Cela ne me dérange pas de devoir commencer et que quelqu'un pourrait-il me conseiller sur l'endroit où je pourrais trouver un flux Twitter HTML et JS personnalisable, qui n'inclut pas d'images.
Inclure
data-width="100%"