Responsive Social Share Genesis CSS

style.css

/**************
Custom Social Share Buttons

Author: Sachin Verma

Author URL: www.bitdoz.com
***************/

.dashicons {
    line-height: inherit !important;
}
.social-sharer {
    display: table;
}

.share-love {
    float: left;
    height: 42px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 0 10px 0 10px;
    border-radius: 2px;
    line-height: 41px;
    background-color: #333;
}

.share-facebook {
    float: right;
    height: 42px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 10px 0 10px;
    border-radius: 2px;
    line-height: 41px;
    background-color: #3b5998;
}

.share-twitter {
    float: right;
    font-size: 14px;
    height: 42px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 0 10px 0 10px;
    border-radius: 2px;
    line-height: 41px;
    background-color: #00aced;
}

.share-google {
    float: right;
    height: 42px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 0 10px 0 10px;
    border-radius: 2px;
    line-height: 41px;
    background-color: #dd4b39;
}

.share-text,
.share-text-twitter {
    color: #ffffff;
    font-size: 14px;
}

.longtext {
    display: none;
}

@media only screen and (max-width:422px) {
    .share-love {
        display: none;
    }
}

@media only screen and (min-width:724px) and (max-width:1023px) {
    .longtext {
        display: inline;
        color: #ffffff;
        text-align: left;
    }

    .share-text-twitter {
        display: none;
    }
}

@media only screen and (min-width:1140px) {
    .longtext {
        display: inline;
        color: #ffffff;
        text-align: left;
    }

    .share-text-twitter {
        display: none;
    }
}

.share-facebook:hover,
.share-twitter:hover,
.share-google:hover {
    opacity: 0.9;
}