Twitter API Question posted in
The official Twitter API documentation can be found here.

CSS changes appear in inspector, but not upon applying changes in actual CSS file and refreshing – Twitter API

I am working on a project using the Twitter API. Basically, type in a username and it fetches the users tweets and renders them on the page. It renders them in the typical card Twitter provides for embedded tweets. I am trying to change the height of the cards.

It is easy to change the height of the cards in the inspector, by selecting the element and adding "height: 600px;" to the class ".EmbeddedTweet", however, when I apply the same changes in my CSS file and save and refresh the page, the changes do not appear. Why do the changes appear in inspector but not upon reloading the page?

I haven’t had this problem before. I am a newer developer. How can I get the changes to stick? Thanks.

Example Code: (Rendered tweet sent back from Twitter API)

<div class="EmbeddedTweet EmbeddedTweet--edge 
            js-clickToOpenTarget
            tweet-InformationCircle-widgetParent" 
     data-click-to-open-target="https://twitter.com/username/status/947824196909961216" 
     data-iframe-title="Twitter Tweet"
     data-dt-full="%{hours12}:%{minutes} %{amPm} - %{day} %{month} %{year}"
     data-dt-explicit-timestamp="8:37 AM - Jan 1, 2018" 
     data-dt-months="Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"  
     data-dt-am="AM"         data-dt-pm="PM"   data-dt-now="now" 
     data-dt-s="s"           data-dt-m="m"     data-dt-h="h"
     data-dt-second="second" data-dt-seconds="seconds" 
     data-dt-minute="minute" data-dt-minutes="minutes" 
     data-dt-hour="hour"     data-dt-hours="hours" 
     data-dt-abbr="%{number} %{symbol}" 
     data-dt-short="%{day} %{month}"   data-dt-long="%{day} %{month} %{year}" 
     data-scribe="page:tweet" 
     id="twitter-widget-0" 
     data-twitter-event-id="0" 
     lang="en">

Adding a CSS property to that tweet:

.EmbeddedTweet {
    height: 600px;
}

Adding !important, along with clearing the cache appear to make no difference.

Tags:

3

Answers


  1. 0

    may be you have tried already but still
    1. i will suggest you can check whether any css is overridding?
    2. try to give css according to heirarchy.

    Login or Signup to reply.
  2. 0

    In my experience with iframes, especially with relation to twitter apps/apis the css can be blocked completely allowing no changes to it. You may need to find a more malleable option to embed tweets?

    Login or Signup to reply.
  3. 0

    You cannot effect an iframe’s content with CSS.

    Have you looked at the Twitter for websites docs portion about custom css?

    Also here is a faq that touches the subject of height; How can I create an Embedded Tweet of a consistent height?
    This strictly says:

    An Embedded Tweet requires a minimum width of 220 pixels and will fill up to 550 horizontal pixels.

    Twitter among others are a bit specific with how their widgets look, so they might not allow you to fiddle with the look much. For any kind of change in the layout, you might try this: Set conversation and cards parameters to false to limit Tweet display to just its basic formatting.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search