On the domain, links are underlined in blue

Design help General
1

Hey, guys!

On the domain, the links are underlined in blue, although other colors are configured in the constructor. On ‍Flat Roofing phone and email links are black, but on the domain ‍Flat Roofing the links are blue. How do I fix this?

2021-02-09_19-11-27
2021-02-09_19-11-271366×657 190 KB

2

Hey, @Tatyana.dsgn Please share your read-only link so that we can take a look!

1 Like
3

@Sachin please help me [Webflow - Red.Builders]

I hope for your great experience in working with webflow.

4

Hey, @Tatyana.dsgn Your "link-51" font-color is being overridden by default blue. It might be because of the webflow default “#333” font-color.

Can you change the pink **“All Links”** Tag at the bottom of the list. and change the default “#333” to your desired color it might solve the issue. Cause webflow shows the color as “#333” but it will be actually the default “#0000EE”

image

1 Like
5

@Sachin If I understood what you wrote correctly, it didn’t help. What else can I do?

6

Hi, Tatyana! This is done automatically by browsers on a lot of phones and tablets. Can you try pasting this code into your and see if it helps?

<style>
a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}
</style>

The idea here is that we’re telling the browser to style telephone numbers by inheriting the color properties you set and clearing any default text decoration (like underlines).

Find out how to add a code snippet like this to all pages in your project.

Please keep us updated and let us know how it works out!

1 Like
7

This is the best solution @McGuire can you share some intel on the pseudo selector tel: as the code works with and without colon:

1 Like
8

@McGuire @Sachin It worked, guys! What happiness!!!

2021-02-10_18-41-31
2021-02-10_18-41-311044×379 13.7 KB

The code works with and without a colon:

And now another problem:( after inserting this code into the ‘head code’.

In the contact form on the right, the phone underscore disappeared. And in the footer, the animation does not work when you hover over the phone and email.

What can I add to the code to keep the text underlined and the hover animation?

9 
<style>
  a[href^="tel:"] {
    color: white;
    text-decoration: underline;
  }

  a[href^="mailto:"] {
    color: white;
    text-decoration: underline;
  }

/*on hover choose your desired color I've added red in this case */

  a[href^="tel:"]:hover {
    color: Red;
    text-decoration: underline;
  }

  a[href^="mailto:"]:hover {
    color: Red;
    text-decoration: underline;
  }
</style>

can you add the :arrow_heading_up: CSS and try :peace_symbol:

1 Like
10

@Sachin Thanks! I tried your version, but decided to go back to the previous version of the code. Because the underscore in the footer is not necessary, the phone in the upper block should be black. As a result, I replaced the underscore with a regular line and set up the mouse hover animation in interactions.

Thanks for your help, guys, I couldn’t have done it without you! :hugs:

2021-02-12_04-01-48
2021-02-12_04-01-481366×655 182 KB

2021-02-12_04-06-51
2021-02-12_04-06-511366×657 124 KB

11

:cool: All the best for your future endeavors :peace_symbol:

12

@Sachin Thank you, I will try my best :blush:

13

@Tatyana.dsgn! Glad this appears to be working out for you. Keep up the good work and let us know if anything else comes up!

14

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