Social link colors do not work on mobile

Support
#1

Hello support team,

The social colors for both top and bottom css code are via pro theme settings:

.x-topbar .p-info {
color: slateblue;
}

.x-topbar .x-social-global a {
color: cadetblue;
}

.x-topbar .x-social-global a:hover {
color: darkcyan;
}

.x-colophon.bottom .x-colophon-content {
color: teal;
}

.x-colophon.bottom .x-social-global a
{
color: cadetblue;
}

.x-colophon.bottom .x-social-global a:hover
{
color: darkcyan;
}

And they are showing correctly, except when on mobile.

Website: https://vitalytennant.com

How can this be resolved.

Thank you in advance.

#2

Hello Vitaly,

Thanks for writing in!

The CSS code only works on smaller screens (below 980 pixels) because you have inserted the code like this:

@media(min-width:980px){
    .search-results .has-post-thumbnail .entry-featured,.search-results .has-post-thumbnail .entry-wrap{
        float:left;
    }
    .search-results .page .entry-featured,.search-results .single-post .entry-featured{
        display:block;
    }
    .search-results .hentry,.search-results .has-post-thumbnail .entry-footer{
        clear:both;
        margin-bottom:30px;
        display:block;
    }
    .search-results .hentry.has-post-thumbnail:after{
        content:"";
        height:0;
        display:block;
        clear:both;
    }
    .search-results .hentry.has-post-thumbnail{
        background-color:white;
        padding:30px;
        border-radius:4px;
        box-shadow:0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    }
    .search-results .entry-thumb img{
        min-width:30%;
        max-height:300px !Important;
    }
    .search-results .has-post-thumbnail .entry-featured{
        width:33%;
    }
    .search-results .has-post-thumbnail .entry-wrap{
        width:65%;
        padding:0;
        float:right;
        border:none;
        box-shadow:none;
    }
    .search-results .has-post-thumbnail .entry-footer{
        display:none !important;
    }
    .x-topbar .p-info{
        color:slateblue;
    }
    .x-topbar .x-social-global a{
        color:cadetblue;
    }
    .x-topbar .x-social-global a:hover{
        color:darkcyan;
    }
    .x-colophon.bottom .x-colophon-content{
        color:teal;
    }
    .x-colophon.bottom .x-social-global a{
        color:cadetblue;
    }
    .x-colophon.bottom .x-social-global a:hover{
        color:darkcyan;
    }
}

You should have inserted it before the @media CSS block like this:

.x-topbar .p-info{
    color:slateblue;
}
.x-topbar .x-social-global a{
    color:cadetblue;
}
.x-topbar .x-social-global a:hover{
    color:darkcyan;
}
.x-colophon.bottom .x-colophon-content{
    color:teal;
}
.x-colophon.bottom .x-social-global a{
    color:cadetblue;
}
.x-colophon.bottom .x-social-global a:hover{
    color:darkcyan;
}


@media(min-width:980px){
    .search-results .has-post-thumbnail .entry-featured,.search-results .has-post-thumbnail .entry-wrap{
        float:left;
    }
    .search-results .page .entry-featured,.search-results .single-post .entry-featured{
        display:block;
    }
    .search-results .hentry,.search-results .has-post-thumbnail .entry-footer{
        clear:both;
        margin-bottom:30px;
        display:block;
    }
    .search-results .hentry.has-post-thumbnail:after{
        content:"";
        height:0;
        display:block;
        clear:both;
    }
    .search-results .hentry.has-post-thumbnail{
        background-color:white;
        padding:30px;
        border-radius:4px;
        box-shadow:0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    }
    .search-results .entry-thumb img{
        min-width:30%;
        max-height:300px !Important;
    }
    .search-results .has-post-thumbnail .entry-featured{
        width:33%;
    }
    .search-results .has-post-thumbnail .entry-wrap{
        width:65%;
        padding:0;
        float:right;
        border:none;
        box-shadow:none;
    }
    .search-results .has-post-thumbnail .entry-footer{
        display:none !important;
    }
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

#3

Hello Rue,

Thank you for the information, and insights.

Colors are now working per your guidelines.

Successfully.

#4

You are most welcome, Vitaly.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.