I have an iframe containing chatbot which is already placed in the right bottom corner of the screen. Below is the non-responsive code
.chatbot-div {
z-index: 2147483647;
position: fixed;
top: 50px;
right: 8px;
}
.b2bchatbot-iframe-open {
display: block;
overflow: hidden;
width: 601px;
height: 89vh;
border-radius: 5px;
border: medium none;
}
.b2bchatbot-iframe-close {
display: none;
overflow: hidden;
width: 601px;
height: 89vh;
border-radius: 5px;
border: medium none;
}
<div class="chattextwithicondiv" id="disableFloatIcon">
<img class="image-tag" src={Icon} onclick={launchVirtualAssistant} />
</div>
<div class="chatbot-div" id="enableiFrame">
<button class="close-popup-close" id="enableBtnForiFrame" onclick={closeVirtualAssistant}>×</button>
<iframe id="enableB2BiFrame" class="b2bchatbot-iframe-close" src="https://chatbot.hellotars.com/conv/NJba4f/" frameborder=0 scrolling="no "></iframe>
</div>
What to add in CSS to make the contents in iframe (popup chat window) responsive for different mobile devices?
Note: The existing code in CSS is not responsive