Streaming live at 10am (PST)

IE code in header help


#1

I need to have my client’s site presentable in IE (yeah, I know…). Currently, the blog post summary on the home page and the blog page looks like the below.

Is there a way to add custom code to the head code under site settings to make the class “blog post summary” not visible all together JUST in IE only? If so, can someone help me with the specific code? TIA!


#2

Bueller?

Any direction would be appreciated. Thanks!


#3

Only by custom code - JS - but add live URL (weird output).

Hide (If explorer hide X)

https://www.w3schools.com/jsref/prop_style_visibility.asp

https://www.w3schools.com/jquery/eff_hide.asp


#4

I don’t know of a Webflow-native way to do this, but you could probably pull this off with conditional comments:

<!--[if IE]>
<style type="text/css">
.blog-post-summary {
  display: none;
}
</style>
<![endif]-->

#5

Thanks, David. I’m pretty certain IE 11 doesn’t support conditional statements (only v 9 and lower). I got the code to work in the header, but it affects all browsers. Thanks for providing me with a good start!


#6

Looks like you’re right about IE11. I did find that there’s an IE-specific media query you can use, though: https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/

So you could target all versions of IE with the following:

<!--[if IE]>
<style type="text/css">
.blog-post-summary {
  display: none;
}
</style>
<![endif]-->

<style type="text/css">
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .blog-post-summary {
    display: none;
  }
  </style>
}

#7

THANK YOU! That worked!