How to control height of embedded timeline with media queries?

[d3creativeuk]

Hi

I’m trying to change the height of an embedded timeline dynamically using media queries.

This used to work:

#twitter-widget-0 {
    height: 300px !important;
}

@media (min-width: 768px) {
#twitter-widget-0 {
    height: 600px !important;
}

Unfortunately, when using the new embed code the footer is cut off when using the CSS above.

I’ve looked at the docs, I can see I can use data-height to control the height of the timeline, but it’s fixed. The layout of my page means the height of the timeline needs to change.

Is this possible?

[d3creativeuk]

The CSS above works if you use data-height, like this:

 <a class="twitter-timeline" href="https://twitter.com/[username]" data-height="300">Tweets by [username]</a>

Target #twitter-widget-0 with this CSS

  #twitter-widget-0 {
height: 400px !important;
}

This CSS will override the height set in data-height

This means you can change the height of the timeline with media queries

#twitter-widget-0 {
height: 350px !important;
 }

@media (min-width: 768px) {
#twitter-widget-0 {
 height: 600px !important;
 }

Is this documented anywhere?

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.