How can I prevent a phone number from appearing as a blue link on mobile devices in Webflow?

Published on
September 22, 2023

To prevent a phone number from appearing as a blue link on mobile devices in Webflow, you can use a little bit of CSS. Follow the steps below to accomplish it:

  1. Open your Webflow project and navigate to the page where you want to prevent the phone number from appearing as a link.
  2. Go to the Designer tab and select the element that contains the phone number (e.g., a text element or a link block).
  3. Click on the "+" icon next to the element's name in the Navigator panel to create a new class.
  4. Give the new class a meaningful name, such as "phone-number-no-link."
  5. With the newly created class selected, go to the Styles panel on the right-hand side of the Designer.
  6. Click on the "Add Class" button and choose the "Combo Class" option.
  7. In the Combo Classes dropdown, select "New Class" and name it "no-link-style" or any other appropriate name.
  8. In the Styles panel, navigate to the "Typography" section and expand it.
  9. Locate the "Links" section and click on the arrow to expand it.
  10. Under "Links," click on the "All Links" state to modify the link styles specifically for that state.
  11. Disable the "Text underline" option by clicking on the toggle switch beside it.
  12. Scroll down further until you find the "Phone Links" section.
  13. Again, click on the "All Links" state to modify the link styles.
  14. Change the link color to the desired color you want your phone number to appear as (e.g., black, gray, or any other color that suits your design).
  15. Apply the new class to the element containing the phone number by selecting it in the Navigator panel and adding the "phone-number-no-link no-link-style" classes.

By following these steps, you will be able to prevent the phone number from appearing as a blue link on mobile devices in Webflow. The phone number will still retain its functionality, meaning users can still tap on it to dial the number on their mobile devices.

Additional Questions:

  • How can I style the phone number link in Webflow?
  • How do I make a clickable phone number in Webflow without it appearing as a link?
  • Can I customize the appearance of a phone number link in Webflow?