Div with position:fixed not visible in mobile Responsive design

Question

I have a website with an online chat script integrated. We created a image button instead of default link provided by the company.

The div in which image reside is marked as position fixed and it is visible on the bottom right corner of the browser on the desktop.

If I open the same in mobile the div is not visible though the design is Responsive.

Below is the CSS that is used for both versions

@media (max-width: 768px){
 #theradome-proonto {
 position: fixed;
 bottom: 30px;
 right: 12px;
 background: white;
 z-index: 99999;
 -webkit-backface-visibility: hidden;
}
}

@media (min-width: 768px){
 #theradome-proonto {
 position: fixed;
 bottom: 30px;
 right: 12px;
 background: white;
 z-index: 99999;
}
}

My website is http://www.theradome.com it is built in wordpress

Answer 1

Remove the #theradome-proonto in modal.less on Line 95

This css rule sets display: none for your div#theradome-proonto That is the CSS rule which affects the proper displaying of your div.

@media screen and (max-width: 767px)
    #STM_root_elem, #theradome-proonto, .doctor_trusted {
        display: none !important;
}

Try to override this by following CSS

@media (max-width: 768px){
    #theradome-proonto {
        position: fixed;
        bottom: 30px;
        right: 12px;
        background: white;
        z-index: 99999;
        -webkit-backface-visibility: hidden;
        display: block !important; /* this line is important! */
    }
}

Edit 2 What is in your style.css on line 2673? Because when I open style.css in my browser, I see following comment on line 2671 - /* rules for all mobile resolutions (< 768) */ which is followed by the CSS I've mentioned before.

If you can't find it, my last advice to you is - try to place the CSS I've added (this one with display: block !important) at the end of your style.css