Callout and countdown modules' issues on IE11

There’s a couple of issues with my website on IE11:

  1. The countdown is not animated: http://screencast.com/t/HPGppY35Bve

  2. Callout module’s images suddenly have a lot of extra padding on both sides: http://screencast.com/t/ARh9kVZSe3w

more of the same issue:

http://screencast.com/t/lyxgewrk28S

Relevant thread where you helped me adjust the images position and padding: http://forum.wpbeaverbuilder.com/support/q/callout-module-adjusting-image-position/#post-96850

I’ve never really done anything on WP to optimize the website for IE browsers. Any ways to get rid of those issues?

Hi Maurice,

Can you provide a link to the page(s) where these issues are happening, please?

Thanks,
Danny

Yeah, my bad, I forgot to paste the most important thing.

http://www.factorydesk.com/

Hi Maurice,

I had a bit of a hard time diagnosing your issue, as BrowserStack was constantly crashing or loading insanely slow. However, can you try adding the following CSS.

logistics-1 .fl-callout-photo .fl-photo-align-center {
    text-align: right;
}

You may want to increase the padding-right so that they’re not so close together. Then check on IE again and see if this resolves the issue.

In regards to the Countdown, you appear to have a JS error on your site which may be causing the issue. Is it possible for you to disable all active plugins except BB and check again. If the issue persist, let us know and we can look into further.

Thanks,
Danny

Adding the CSS you provided resulted in the whole content of the module being aligned to the right on IE11:

http://screencast.com/t/i7qzCgfA
http://screencast.com/t/zJK2p5Y99g0

Any other ways to fix the problem?

Hey Maurice,

Can you remove all other styling for those Callout modules and add the ones below instead?

.one-system .fl-callout-photo {
  display: inline-block;
  width: auto;
  vertical-align: top;
  max-width: 20%;
}
.one-system .fl-callout-content {
  display: inline-block;
  width: auto;
  max-width: 80%;
}
.logistics-1 .fl-callout-photo {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding-right: 10px;
}
.logistics-1 .fl-callout-content {
  display: inline-block;
  width: auto;
}
.logistics-1 .fl-callout-content .fl-callout-title {
  padding-bottom: 0px;
}

Ben

That worked really well, thank you!

No worries! Enjoy!

Ben