Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 1, 2017 at 9:27 pm #802777
    mleite1

    In mobile, the icons of social networks appear with a white border and a dark color. How to remove the border and change the color?

    I’m viewing on iphone 7.

    Link

    PRINCIPAL2

    June 2, 2017 at 12:10 pm #802959
    Rikard

    Hey mleite1,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks li {
  border-color:yellow !important;
}
.responsive #top #header_meta .social_bookmarks li a {
  background: purple !important
}
}

    Best regards,
    Rikard

    • This reply was modified 8 years, 5 months ago by Rikard.
    June 2, 2017 at 3:37 pm #803063
    mleite1

    Rikard, thanks for the feedback.

    But it lacked how to control the color of the icon.

    June 2, 2017 at 3:46 pm #803068
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive #top #header_meta .social_bookmarks li a {
  color: orange !important
}
}

    Best regards,
    Yigit

    June 2, 2017 at 4:54 pm #803101
    mleite1

    Very good Yigit. It worked.

    ANOTHER THING
    I noticed that the icons are not aligned with the center of the address text.

    June 2, 2017 at 5:22 pm #803114
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.av_icon_active_right .social_bookmarks { padding: 0!important; }}

    Best regards,
    Yigit

    June 2, 2017 at 6:31 pm #803156
    mleite1

    Its ok now…..

    Do I need to use all these codes above ^^^?

    /*SOCIAL ICONS MOBILE*/
    @media only screen and (max-width: 767px) {
    .av_icon_active_right .social_bookmarks { padding: 0!important; }}

    @media only screen and (max-width: 767px) {
    .responsive #header .social_bookmarks li {
    border-color:#120A2A !important;
    }
    .responsive #top #header_meta .social_bookmarks li a {
    background: #120A2A !important
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #top #header_meta .social_bookmarks li a {
    color: white !important
    }
    }

    June 2, 2017 at 7:02 pm #803166
    Yigit

    Hi,

    Yes, but here goes a simplified version :)

    /*SOCIAL ICONS MOBILE*/
@media only screen and (max-width: 767px) {
.av_icon_active_right .social_bookmarks { padding: 0!important; }
.responsive #header .social_bookmarks li {
border-color:#120A2A !important;
}
.responsive #top #header_meta .social_bookmarks li a {
background: #120A2A !important
color: white !important
}
}

    Best regards,
    Yigit

    June 2, 2017 at 7:57 pm #803180
    mleite1

    Ok…tks Yigit

    June 2, 2017 at 8:06 pm #803182
    Yigit

    Hi!

    You are welcome mleite1 :) Enjoy your weekend

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘SOCIAL ICON ON MOBILE’ is closed to new replies.