Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 30, 2019 at 7:19 pm #1084947
    tivo_designs

    Hi there,

    I am trying to change the mobile number font color above the main menu on the mobile version. On desktop, it is a transparent header with white font. However on mobile, the header is white and the telephone font remains white. How can I change it to be #76992a?

    Thanks!

    March 31, 2019 at 2:29 pm #1085076
    Nikko

    Hey tivo_designs,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    <pre><code>@media only screen and (max-width:767px) {
#top .phone-info span, 
#top .phone-infor span a {
    color: #76992a;
  }
}

    Best regards,
    Nikko

    April 2, 2019 at 3:15 pm #1086096
    tivo_designs

    Hi Nikko,

    Thanks for responding. That didn’t seem to work. I should also note that have this css code for when the number is on a transparent header:

    .av_header_transparency .phone-info a {
    color: white!important;
    }

    I’m not sure if this is interfering with what you sent me.

    April 2, 2019 at 3:49 pm #1086129
    Nikko

    Hi tivo_designs,

    I think I have made a mistake and include < pre > < code >, please just use this one:

    @media only screen and (max-width:767px) {
#top .phone-info span, 
#top .phone-infor span a {
    color: #76992a;
  }
}

    Best regards,
    Nikko

    April 2, 2019 at 4:08 pm #1086139
    tivo_designs

    Unfortunately, it still isn’t working. I’ve provided my login below if you needed to take a look.

    April 3, 2019 at 9:44 am #1086449
    Rikard

    Hi,

    This CSS is overriding what Nikko sent:

    .av_header_transparency .phone-info a {
    color: white!important;
}

    It looks to be coming from a file from a caching or performance plugin.

    Best regards,
    Rikard

    April 5, 2019 at 6:12 pm #1087551
    tivo_designs

    Hi there,

    Yes, because the phone number is linked, I needed the font to remain white on a transparent header (otherwise, it switches to #eb952c as the default color for linked text). Therefore, I used : 

    .av_header_transparency .phone-info a {
    color: white!important;
}

    But now the phone number stays white on mobile where I need it to be #76992a. How do you suggest I fix this? At the end of the day, I need the phone number to be linked and still appear on a transparent header and white mobile header.

    Thanks!

    April 6, 2019 at 4:17 pm #1087771
    Nikko

    Hi tivo_designs,

    Try adding !important to the code I gave so it will not get overriden since it has a higher css selector priority:

    @media only screen and (max-width:767px) {
#top .phone-info span, 
#top .phone-infor span a {
    color: #76992a;
  }
}

    Best regards,
    Nikko

    April 6, 2019 at 5:01 pm #1087774
    tivo_designs

    Ok! Where do I add !important in the code that you provided? Should I also adjust 

    .av_header_transparency .phone-info a {
    color: white!important;
}

    by deleting !important as well?

    Thank you

    April 7, 2019 at 11:28 pm #1088064
    Mike

    Hi,
    I have adjusted your css for you so that for mobile your phone number will be green and for desktop it will be white:

    @media only screen and (max-width:767px) {
#top .phone-info span, 
#top .phone-info span a {
color: #76992a !important;
}
}
@media only screen and (min-width: 768px) { 
.av_header_transparency .phone-info a {
    color: white !important; 
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    April 9, 2019 at 11:22 pm #1088921
    tivo_designs

    This is great, thank you so much for the help!

    April 10, 2019 at 7:01 am #1088993
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Change Phone Text Color on Mobile only’ is closed to new replies.