Product Description & LiveChat bad interaction

Hello,

I have created a two-columned product description with the following code:

CSS:

.one-half-column-left {
width:48%;
float:left;
}

.one-half-column-right {
width:48%;
float:right;
}

@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

HTML:

<div class="one-half-column-left">
<p>Insert the content for the left column here.</p>
</div>
<div class="one-half-column-right">
<p>Insert the content for the right column here.</p>
</div>
<br style="clear:both;" />

It has changed to positioning of our LiveChat app on mobile. Set to be positioned in the bottom right but has been affected on this one product page. Any idea why? and how I could fix this and have it appear in the bottom right?