Concealing telephone links from view on desktop devices

Over at this website Link to the site, there's contact information located on the top right, including a tel: link for mobile users. How can we effectively hide the tel: link specifically for desktops in the simplest manner? Currently, the setup looks like this:

CSS: 

#header .contact-info1 { width: 253px; height: 50px; display: block; float: right;     background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin-    top: 110px; }
#header .contact-info2 { width: 292px; height: 51px; display: block; float: right;     background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin-    top: 30px; }

@media only screen and (max-device-width: 480px) {
#header .contact-info1-mobile { width: 253px; height: 50px; display: block; float:     right; cursor: pointer; background: url(contact-info1.png) 0 0 no-repeat transparent;     margin-right: 39px; margin-top: 110px; }
#header .contact-info2-mobile { width: 292px; height: 51px; display: block; float:     right; cursor: pointer; background: url(contact-info2.png) 0 0 no-repeat transparent;     margin-right: 0px; margin-top: 30px; }

HTML:

<a href="tel:+491796737741" class="contact-info1-mobile" ></a>
<div style="clear:right"></div>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bdbab2bb94a6a3f9b2b8bdb1a7b1bafab7bbb9">[email protected]</a>" class="contact-info2-mobile" ></a>

Currently, I have successfully hidden the link for desktop views, but how can I maintain the visibility of the contact images while hiding the link exclusively for desktop users?

htmlcssmobile

Answer №1

If you want to accomplish the same task, you can utilize the $(window).resize function in conjunction with jquery

$(window).resize(function() {
    var width = $(window).width();
    if (width < 750) {
        // Perform a specific action
    }
    else {
        //Perform an alternative action
    }
});

Alternatively, you can also identify the browser by following the link provided in my previous comment using jQuery or javascript

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?

I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...

htmlcssangulartwitter-bootstrapng-bootstrap

Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors s ...

jqueryhtmlcssangularjsmaterialize

The code encountered an error: "execute is not defined."

Whenever I click the execute button, I encounter an error in my console stating "Uncaught ReferenceError: execute is not defined". During onclickng, I am dynamically creating an input box and a button. <!DOCTYPE html> <html lang="en=US"& ...

javascriptjqueryhtmlcss

Frozen Blanket: Modifying Particle Velocity

I need assistance adjusting the particle speed in this snowfall animation script. I'm having trouble locating the specific values that control the "Falling Speed." The current speed of the falling particles is too fast, and here is most of the code sn ...

javascripthtmlthree.jshtml5-canvas

Choose an option from the dropdown menu using a variable

I've been struggling to get a dropdown's selected value to change based on a query result. No matter what I do, it always defaults to the first option. After searching through numerous similar questions, none of the solutions seem to work for me ...

phphtmlhtml-select

When enclosing my Javascript code in CDATA tags within my SVG files, it does not execute

Having an SVG file in this format: <svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1435 1084"> &l ...

javascriptcssxmlsvgcdata

Can anyone help me with displaying auto complete HTML files in VScode?

As a Korean, please excuse my lack of proficiency in English. This image displays the autocomplete feature for HTML files in IntelliJ. This particular file was generated by Spring Boot (start.spring.io). How can I achieve the same in VSCode? ...

htmlspringspring-bootvisual-studio-codeautocomplete

Email signature becomes distorted when replying to messages

I am encountering an issue with my email signature that is causing it to become distorted when replying in Outlook. The problem arises when I send an email with the signature from Outlook 2016 on Mac to Outlook 2007 on Windows – initially, everything lo ...

htmlcssemailoutlooksignature

Iterating through JSON data and dynamically updating div contents based on the results

A basic HTML page structure is provided below: <li class="slide"> <h1>Hello</h1> <p>This is a test.</p> </li> <li class="slide"> <h1>Hello Again</h1> <p>This is ...

javascriptjqueryhtmljson

Setting an integer value by retrieving data in Java: A step-by-step guide

Within my private void method called initData() lies some data (or logic, lol). Among these data is a String that represents a number. I wish to retrieve this number and assign it to an integer or any other variable type that I can manipulate in the follow ...

javaandroidstringmobileint

Unable to navigate to input field in Ionic app while focusing on input field on mobile device

Default phone feature: When an input is focused on a mobile device, it automatically scrolls to that input. Issue: This functionality is not working in my ionic app due to horizontal scrolling. Consequently, when I tap on an input, it does not scroll to i ...

htmlangularjscssionic-framework

Automatically scroll the unselected tab to the bottom using code

Is there a way to smoothly scroll an inactive Chrome tab to the bottom without having to activate it? I have tried using code in the console, but it seems that the tab needs to be activated for the scrolling to work. Here is the code snippet I tested: win ...

javascriptjqueryhtmlcssgoogle-chrome

When editing a user, do not make any changes to the input checkbox

Whenever I try to edit my user from inactive to active, it works perfectly fine. But when I attempt to edit my users from inactive to active, it doesn't seem to work. Here is the PHP code snippet in question: https://pastebin.com/iBaDxH2u <input ...

phphtml

Ensure that the content inside the page has an overflow auto setting

When looking at the image, it is clear that I do not want my page to be scrollable. Researching the issue, I discovered that setting the height to 100vh is the solution (How to make a div 100% height of the browser window). I then set elements like 4 and 5 ...

htmlcssbootstrap-5mdbootstrap

Creating a new page break in an Excel cell produced through HTML

Currently, I am facing an issue while attempting to create an excel file using PHP with HTML and responding with an excel Content-type. Everything seems to be working smoothly except the preservation of new lines within a cell. Various methods like &#1 ...

phphtmlexcelnewline

Transferring PHP data to JQuery through HTML elements

When adding a new comment to the list using PHP variables containing HTML code, the method of choice is typically through JQuery. The question arises - what is the most effective way to achieve this? Would one generally opt for an ajax call? Here's t ...

javascriptphpjqueryhtmlajax

jQuery failing to recognize multiple selection form elements

<select class="js-example-basic-multiple categories form-control" name="categories[]" style="width: 100%" multiple="multiple"> <option value=""></option> <option value="fresher">fresher</option> <option value=" ...

phpjqueryhtmllaravel-5.4

Get rid of the white line in the Navbar-toggler when it expands

I'm trying to get rid of an odd white line that keeps appearing at the bottom of my header's navbar. The navbar has a dark background, but whenever I click on the toggler button, this strange white line shows up at the bottom. You can view my we ...

htmlcssbootstrap-4navbar

The page transition on Android lacks fluidity

Currently, I am working on developing a hybrid app with HTML5 and AngularJS. One of the features I have incorporated is the use of Angular animate for page transitions. However, I have noticed that while the transition is seamless on iOS devices, there s ...

javascriptandroidangularjshtmlcss

The hyperlink menu within the Bootstrap 4 navbar extends into the inline-form

Bootstrap 4's site suggests that a navbar with forms should function properly: I have used the class="form-inline" and at the same level in the HTML, the ul-tag with 3 hyperlinks. Check out this codepen example: http://codepen.io/anon/pen/eWOKXL?ed ...

htmlcssbootstrap-4twitter-bootstrap-4