[Plugin: Rotating Tweets widget and shortcode] Tweets bleeding off Safari/Firefox and iPad

I can’t currently replicate it (although I’ve had a look in Firefox and Safari on PC): perhaps it’s finally time to buy that iPad!

Currently, Rotating Tweets takes all the styling from the main theme apart from some font sizes and line-spacing – so that would be my starting point, but here are some other ideas that might work.

1. You could further shorten any URLs (if they’re what’s causing the problem). Change line 307 of rotatingtweets.php to read:
   

   $after[] = "<a href='".$url->url."'>".$url->url."</a>";

2. There’s an option in jQuery Cycle not to resize the ‘container’ to the largest ‘slide’ (which might be what’s causing the problem) – so you could add
   

   containerResize: 0,

   as an extra line around line 10 of /js/rotating_tweets.js – and see what happens! I’ve not tried this, so it might not have the desired effect!

3. Otherwise, I can only suggest adding some more styling in style.css to #header .widget-area or, if the problem is unique to Rotating Tweets and you can’t replicate it in, say, a text widget, to #header .widget-area .rotatingtweet whether by:

• knocking back font sizes and/or
• setting further limits to the size of the box and/or
• adding overflow: hidden.

Hope this helps. Please let me know if any of these work and, if they’re not pure styling changes, I’ll see if I can find a way to programme them in as options.

I’ve now seen it doing it in Chrome – but, bizarrely, not in Mozilla.

As a first step, I would suggest you try the following lines in your style sheet:

.rotatingtweet, .rotatingtweets, p.rtw_meta {
	width: 510px;
}

Another (more extreme) option to look at might be to add:

#header .widget-area {
	display:table;
}

Just taken a peek at https://www.justiceandponder.com/ via https://ipadpeek.com/ and it seems to be OK.

I would be interested in knowing the solution you used to see if it’s something I need to build into the plugin.

Hi Martin

Thanks for a great widget, which worked perfectly until yesterday. Now the text is bleeding over the right hand side of the column. I tried adding your first option, which just made the height shorter (weird). The next suggested fix did absolutely nothing.

Any other ideas please?
https://www.elated.co.za

Thanks!
Karen

Now, despite undoing any changes made, the widget is shorter and only 2/3 lines high.

I think it’s a problem in the text widget immediately before it. The link isn’t closed properly with <a/> instead of </a>. It turns the first tweet into a single, very wide, link, which breaks the width calculation of the widget.

If you change that, does it solve the problem?

Martin

Hi Martin
Thanks, that’s embarrasing. But, no it didn’t make a difference. In the plugin editor the rotatingtweets/css/style.css is inactive – does that make a difference?

It’s because a link is too long…

https://simplevegancooking.wordpress.com/2012/10/06/creamy-cheezy-leek-and-spinach-pasta-sauce/ has already been cut down to simplevegancooking.wordpress. but needs to be cut down more.

If you find line 436 in rotating tweets:

if(strlen($displayurl)>29) $displayurl = substr($displayurl,0,29)."…";

and change it to:

if(strlen($displayurl)>24) $displayurl = substr($displayurl,0,24)."…";

That should solve your problem.

Alternatively, change:

$after[] = "<a href='".$url->url."' title='".$url->expanded_url."'>".esc_html($displayurl)."</a>";

to:

$after[] = "<a href='".$url->url."' title='".$url->expanded_url."'>".esc_html($url->url)."</a>";

and that should also solve your problem!

Yes success! I changed it to 0,24. Thanks so much Martin!

Just for the record, the very latest version of the plug-in now limits the Rotating Tweets widget to the width of the ‘widget container’ it is held in, provided the widget ‘container’ has the style ‘widget’ or ‘widget_rotatingtweets_widget’. Hopefully, this provides a permanent fix to the problem.

Yes Martin it does. Thank you!