CODEWITHSUNDEEP
htmlcsswordpress
raouaoul
raouaoul

Reputation: 882

Something is blocking me from overwriting css

On the page http://project.dreamo.ee/lennumaa/wordpress/ :

The bottom-left tawk.to chat bar's width is auto; for some reason. I want it to be 320px.

I have tried !important in every css file(#tawkchat-minified-container{width: 320px !important}), custom css plugins, made sure the plugin appearance on tawk.to site has width of 320px, but still it has width:auto for some reason.

When I edit the width on google debugger, it works, but I need it to stay like that...

The funny part is, that sometimes it is 320px, and sometimes it goes full width. Not even changing anything in the meantime.

It just seems really weird to me and I cant figure out whats the problem behind this.

Thanks in advance!!

Upvotes: 1

Views: 2161

Answers (2)

Arif
Arif

Reputation: 573

Add this script

<script type="text/javascript">
  $( document ).ready(function() {
    jQuery("#tawkchat-minified-iframe-element").css("width","320px");
  });
</script>

VIA CSS :

#tawkchat-minified-iframe-element, #tawkchat-minified-iframe-element html, #tawkchat-minified-iframe-element body {
    width: 320px !important;
}

Upvotes: 0

Aziz
Aziz

Reputation: 7793

Apply the width to the parent iframe if you cannot edit the iframe's CSS itself.

#tawkchat-minified-iframe-element {
   width: 320px !important;
}

OR Edit the HTML directly since the CSS is written inline:

<iframe id="tawkchat-minified-iframe-element" src="about:blank" frameborder="0" scrolling="no" class="" style="width: 320px;max-width: 100%;outline: none !important;visibility: visible !important;resize: none !important;box-shadow: none !important;overflow: visible !important;opacity: 1 !important;position: fixed !important;border: 0px !important;padding: 0px !important;transition-property: none !important;z-index: 1000001 !important;cursor: auto !important;float: none !important;height: 40px !important;min-height: 40px !important;max-height: 40px !important;min-width: 320px !important;transform: rotate(0deg) translateZ(0px) !important;transform-origin: 0px center 0px !important;margin: 0px !important;top: auto !important;bottom: 0px !important;left: 10px !important;right: auto !important;display: block !important;background: none transparent !important;"></iframe>

#tawkchat-minified-container is not relevant because it is inside an iframe, which does not inherit the general CSS/JS codes of your WordPress theme.

P.S There is a lot of unnecessary code here, try cleaning it up.

Upvotes: 2

Related Questions