Countdown hovers below bottom of widgetized area

[Beth Burt]

Hi there,

This may be out of your realm of your support, but I’d appreciate any help on this issue.

On my site, the countdown isn’t “contained” within its widget element. The element doesn’t dynamically extend to fully contain the Countdown widget and the Countdown “overflows” beyond the element. Please see my dev site at http://dev.ieautism.org/walk-2014/.

I have tried changing the theme back to twenty-eleven, however none of the sidebars appeared. Weird. So I have Twenty-twelve up. You can see that the space between all the widget other widgets is far greater than the space after the countdown and the next widget. On the twenty-twelve theme it doesn’t seem like that big of a deal, but in production (http://ieautism.org/walk-2014/) it’s more obvious since each widget area is segmented. This behavior is seen in both Chrome 32 and IE11 on Windows 8.1. Perhaps there is a style for the aside element other widgets use that the Countdown widget doesn’t?

Many thanks for your help,

-Luis

[Brook]

Howdy ieautism,

I think you could just adjust the margin-bottom for the .tribe-events-countdown-widget to fix this. Does that make sense? I think it will solve your problem if I am understanding you correct. Please let me know if that answers your question, or if perhaps I misunderstood. Thanks!

– Brook

[Beth Burt]

Hi Brook,

Thanks for your reply. I don’t think that’s the issue. It seems the Countdown widget is in the element, or at least overflows over it. I’ve gone ahead and left the countdown widget up on the prod site here so you can see what I mean: http://ieautism.org/walk-2014/register-walk/

Best,

-Luis

[kalgary1]

Hi. I’m new here, so pardon my support forum etiquette, as I don’t know what’s appropriate (whom can help), but wanted to help… Looks like this would fix that overflow issue (temporarily). In a (child-like) custom css file I would add:

/* start widget min-height edit */
.widget.tribe-events-countdown-widget {
min-height: 75px;
}
/* end widget min-height edit */

That should give you 5px above & below, giving the ‘perception’ of a “margin: 5px;”…

disclaimer: I’m just a fellow customer that also uses these plugins.

[Brook]

Howdy again ieautism,

Yeah you are right, the margin would not have helped. I just tried this CSS on your site and it fixed it:
.widget.tribe-events-countdown-widget {
padding-bottom: 5em;
}

As for why this is happening, it looks like neither the tribe-events-full.min.css file is being enqueued, nor the tribe-events-skeleton.min.css. Those are the files that contain the CSS rule for .tribe-clear-fix. Without it, weird overflow issues happen.

Thanks Kalgary1 for the assistance. Your fix would work as well, and we appreciate users chiming in whenever they want to.

Please let me know if that worked for you ieautism. Cheers!

– Brook

[Beth Burt]

Thanks kalgary and Brook! The countdown looks great now. I appreciate your help!

Brook, about why those two css files aren’t being enqueued, do you have any ideas why that would be? In the Display settings I have Tribe Events Styles selected rather than the other two.

[Brook]

You are welcome!

I am curious myself. You are not the only user to have that happen recently. Would you mind grabbing your system information and pasting it here? Make sure to use the ‘Set as private reply’ checkbox to protect your private information from the public. You can find the system info by going to WP Admin > Events > Settings, clicking on the “Help” tab, and scrolling down to the ‘System Information’ box. (Or by going to [yoursite]/wp-admin/edit.php?post_type=tribe_events&page=tribe-events-calendar&tab=help) That will give me a lot of extra information to help diagnose the root cause. If you can that’s awesome, if not I totally understand. Cheers!

– Brook

[Author]

Posts