
.float {
    display: none;
    position: fixed;
    width: 120px;
    height: 56px;
    top: 5px;
    right: 5px;
    background-color: #34b734;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    z-index: 9;
}

.my-float {
    margin-top: 22px;
}



/* Portrait iphone < 8*/
@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .float {
        display: block;
    }

    /* Portrait  iPhone 6+, 7+ and 8+ */
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
        .float {
            display: block;
        }
    }

    /* Portrait iPhone X */
    @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
        .float {
            display: block;
        }
    }

    /* Portrait Galaxy s3 */
    @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
        .float {
            display: block;
        }
    }

    /* Portrait Galaxy S4, S5 and Note 3 */
    @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
        .float {
            display: block;
        }
    }

    /* Portrait  Galaxy S6 */
    @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
        .float {
            display: block;
        }
    }

    /* Portrait Google Pixel XL  */
    @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
        .float {
            display: block;
        }
    }