Search code examples
csstwitter

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

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.

Solution

  • 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?