Fake Recent Sales Notification Popup

fake-recent-sales-notification-popup.markdown

Fake Recent Sales Notification Popup

Around 85% of visitors leave an online store without buying an item. Among many reasons, lack of trust, engagement, and authenticity prevents new visitors from placing an order. Built from the concept of Social Proof, Sales Pop plugin helps you combat the 85% rate of site abandonment with recent sales notifications.

A Pen by Nwankwo Chibuike Samuel on CodePen.

License.

index.html

 <section class="custom-social-proof">
    <div class="custom-notification">
      <div class="custom-notification-container">
        <div class="custom-notification-image-wrapper">
          <img src="https://tidings.today/wp-content/uploads/2018/08/tidings-today-logo-fav.png">
        </div>
        <div class="custom-notification-content-wrapper">
          <p class="custom-notification-content">
            Mr.Nagarajan - Banglore<br>Purchased <b>4</b> Product Name   
            <small>1 hour ago</small>
          </p>
        </div>
      </div>
      <div class="custom-close"></div>
    </div>
  </section>

script.js

     setInterval(function(){ $(".custom-social-proof").stop().slideToggle('slow'); }, 8000);
      $(".custom-close").click(function() {
        $(".custom-social-proof").stop().slideToggle('slow');
      });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
.custom-social-proof {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999999999999 !important;
  font-family: 'Open Sans', sans-serif;
    //display: none;  /* Uncoment This Line to Hide Initially*/
    .custom-notification {
        width: 320px;
        border: 0;
        text-align: left;
        z-index: 99999;
        box-sizing: border-box;
        font-weight: 400;
        border-radius: 6px;
        box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
        background-color: #fff;
        position: relative;
        cursor: pointer;
        .custom-notification-container {
            display: flex !important;
            align-items: center;
            height: 80px;
            .custom-notification-image-wrapper {
                img {
                    max-height: 75px;
                    width: 90px;
                    overflow: hidden;
                    border-radius: 6px 0 0 6px;
                    object-fit: cover;
                }
            }
            .custom-notification-content-wrapper {
                margin: 0;
                height: 100%;
                color: gray;
                padding-left: 20px;
                padding-right: 20px;
                border-radius: 0 6px 6px 0;
                flex: 1;
                display: flex !important;
                flex-direction: column;
                justify-content: center;
                .custom-notification-content {
                    font-family: inherit !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    font-size: 14px;
                    line-height: 16px;
                    small {
                        margin-top: 3px !important;
                        display: block !important;
                        font-size: 12px !important;
                        opacity: .8;
                    }
                }
            }
        }
        .custom-close {
            position: absolute;
            top: 8px;
            right: 8px;
            height: 12px;
            width: 12px;
            cursor: pointer;
            transition: .2s ease-in-out;
            transform: rotate(45deg);
            opacity: 0;
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: 2px;
                background-color: gray;
                position: absolute;
                left: 0;
                top: 5px;
            }
            &::after {
                content: "";
                display: block;
                height: 100%;
                width: 2px;
                background-color: gray;
                position: absolute;
                left: 5px;
                top: 0;
            }
        }
        &:hover {
            .custom-close {
                opacity: 1;
            }
        }
    }
}

I have a theme from credcrypto (Prius theme) the sales notification is not showing on mobile device but it is showing on Windows. What can I do to make it mobile friendly.