IE Countdown stacked vertically – Fixed.

Hi,
We experienced a problem with the various versions of IE displaying the countdown vertically like this:

https://www.dropbox.com/s/bqj1n5irq0rk82s/Screenshot%202017-10-19%2011.06.09.jpg?dl=0

We diagnosed the problem to IE not reading the width properly from the parent ( as mentioned in a previous thread ). Various attempts to define the width failed but we found we could edit the pbc.js file to not set the width on the pbc-shell div ( which was causing the problem ).

The change we made is here:

PBCountdown.prototype.setupShell = function( m ){
this.shellsel = ‘#pbc-shell-‘ + this.id;
this.selector = this.shellsel + ‘ .pbc-down-count’;

this.host = $(‘#pbc-cover-‘+this.id);
this.host.find(‘.pbc-shell’).remove();

this.host.append( PBCUtils.baseTemplate(this.id) );
this.down = $(this.selector);
this.shell = $(this.shellsel);

this.shell.css(‘width’, function(){ return $(this).parent().width(); });
this.orgfont = new Array(this.style.css.num[0], this.style.css.label[0]);
this.em.trigger(‘pbc.setupshell’);
};

To:

PBCountdown.prototype.setupShell = function( m ){
this.shellsel = ‘#pbc-shell-‘ + this.id;
this.selector = this.shellsel + ‘ .pbc-down-count’;

this.host = $(‘#pbc-cover-‘+this.id);
this.host.find(‘.pbc-shell’).remove();

this.host.append( PBCUtils.baseTemplate(this.id) );
this.down = $(this.selector);
this.shell = $(this.shellsel);

// this.shell.css(‘width’, function(){ return $(this).parent().width(); });
this.orgfont = new Array(this.style.css.num[0], this.style.css.label[0]);
this.em.trigger(‘pbc.setupshell’);
};

We haven’t found any issues with the change cross browsers or mobile. You can see the live page here ( counter will be live for a few weeks ):

https://canada2067.ca/en/conference/regional-youth-events/

The page I need help with: [log in to see the link]