Is it possible to swap out a webpage link for a different one based on the size of the screen?

I designed a website for a friend: www.donjas-wellbeingforkids.co.uk

I set up a Facebook Messenger Contact Us Link directly from the contact page here: donjaswell-beingforkids contact

It's functional on desktop, where it seamlessly opens Facebook Messenger. However, the mobile version of Facebook Messenger operates differently, redirecting users to an application.

Is there a way to adjust the link based on screen size? Here are the contents of my responsive.css file and my contact.html file.

@media screen and (min-width: 550px) {
  /*******************************************
      TWO COLUMN LAYOUT
      ********************************************/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 40%;
    float: right;
  }
  /*******************************************
      COLLECTIONS
     ********************************************/
  #collections li {
    float: left;
    width: 45%;
    margin: 2.5%;
  }
  #collections li a p {
    font-size: 90%;
  }
  #collections li a:hover p {
    font-size: 95%;
  }
}

@media screen and (min-width: 700px) {
  /*******************************************
      COLLECTIONS
     ********************************************/
  #collections li {
    float: left;
    width: 28.3333%;
    margin: 2.5%;
  }
  #collections li a p {
    font-size: 75%;
  }
  #collections li a:hover p {
    font-size: 80%;
  }
}

@media screen and (min-width: 750px) {
  /*******************************************
      PAGE: ABOUT
     ********************************************/
  .profile-photo {
    float: left;
    margin: 0 5% 1150px 0;
  }
  #collections li a p {
    font-size: 80%;
  }
  #collections li a:hover p {
    font-size: 85%;
  }
}

@media screen and (min-width: 1000px) {
  /*******************************************
      PAGE: ABOUT
     ********************************************/
  .profile-photo {
    float: left;
    margin: 0 5% 800px 0;
  }
  #collections li a p {
    font-size: 100%;
  }
  #collections li a:hover p {
    font-size: 105%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Contact | Donja's Well-Being For Kids</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/responsive.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>

<body>
  <header>
    <a href="index.html">
      <img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
      <!--
            <h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
            -->
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html" class="selected">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
    <section id="primary">
      <h3>General Information</h3>
      <p>For more details please contact me.</p>
      <p>I have a current DBS Certificate and also Public Liability Insurance.</p>
    </section>
    <section id="secondary">
      <h3>Contact Information</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel: 07916 337 916">Phone: 07916 337 916 </a></li>
        <li class="mail"><a href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82c6e...">[email protected]</a>">Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1f5de...">[email protected]</a></a></li>
        <li class="facebook"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">Click to Message me on Facebook!</a></li>
      </ul>
      <p></p>
    </section>
    <footer>
      <a href="http://facebook.com/Donjaswellbeingforkids" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2017 Donja's Well-Being For Kids.</p>
    </footer>
  </div>
</body>

</html>

Answer №1

Yes, absolutely! You can easily achieve this by utilizing two separate links:

<li class="facebook desktop"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">Click to Message me on Facebook!</a></li> 
<li class="facebook mobile"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">Click to Message me on Facebook mobile website!</a></li> 

You can then use a media query in your CSS to control the visibility of each class:

@media (max-width: 600px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 601px) {
  .mobile {
    display: none;
  }
}

Answer №2

Check out this JQuery solution:

if ($(window).width() <= 768)
{
  updateLink();
}   


function updateLink()
{
    $("a").attr("href", "Your Updated Link Is Here");
}

Answer №3

  1. Make sure to include both links in your HTML code.
  2. By default, hide the desktop link.
  3. When the screen size reaches your desired dimension, hide the mobile link and show the desktop link.

.fb-desktop {
  display: none;
}

@media screen and (min-width: 600px) {
  .fb-desktop {
    display: list-item;
  }
  .fb-mobile {
    display: none;
  }
}
<ul class="contact-info">
  <li class="phone"><a href="tel: 07916 337 916">Phone: 07916 337 916 </a></li>
  <li class="mail"><a href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="571338393d36171338393d362420323b3b7a35323e39303138253c3e332479343879223c">[email protected]</a>">Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f5b7071757e5f7b7071757e6c687a7373327d7a76717879706d74767b6c317c70316a74">[email protected]</a></a></li>
  <li class="facebook fb-desktop"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">CLick to Message me on Facebook!</a></li>
  <li class="facebook fb-mobile"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">Facebook Mobile!</a></li>
</ul>

Answer №4


    <script>

    function ChangeLinkOnResize() {
        if (window.innerWidth < 700) {
            var links = document.getElementsByClassName("LinkClassName");

            for (var i = 0; i < links.length; i++) {
                links[i].href = "newLink";
            }
        }
    };

    document.addEventListener("DOMContentLoaded", function() {ChangeLinkOnResize()});

    </script>

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

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

The <mat-radio-button> component does not have a value accessor specified

When working with HTML and Angular, I encountered the following issue: <mat-radio-group> <mat-radio-button [(ngModel)]="searchType"> And (Narrower search) </mat-radio-button> <mat-radio-button [(ngModel)]="searchType"&g ...

The float right attribute doesn't stay contained within the box; instead, it drifts outside the box

I've been struggling to keep this box fixed at the top of the browser, but I'm facing an issue with the positioning on the right side. I can't seem to figure out how to solve it, so I'm reaching out for some help. #StickyBar #RightSide ...

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?

My task involves adding a collection of cards to the DOM. html <div class="card"> <div class="card-title">Card 1</div> <div class="card-subtext">This is card 1</div> </div> js let ...

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

Changing the style.backgroundImage property overrides any image transition effects

I am currently working on creating a button for a player. You can check out the video (here) The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transitio ...

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

The PNG image that is stored in the MySQL database is not displaying completely on the web browser

Here are the PHP codes from index.php <?php include("connection.php"); $sql = "SELECT prod_cost, prod_name, prod_image FROM products"; $result = mysqli_query($con, $sql); $row = mysqli_fetch_all($result, MYSQLI_ASSOC ...

I believe I may be experiencing an issue with the use of 'style.display' in JavaScript

I'm encountering a small issue. I need a button to reveal more content. Therefore, I require a way to hide this content initially and display it upon clicking, with the ability to reverse this action by hiding it again. Despite my efforts, the conten ...

Fade in text effect using jQuery on a Mac computer

Trying to create a smooth text fading effect across different browsers using jQuery. In the example below, you may notice that during the last part of the animation when the text fades in, the font weight suddenly increases causing a jerky/clunky appearan ...

Using canvas in Bootstrap can lead to columns wrapping onto the next line due to margins

My goal is to align two charts side by side with some padding or margins between them. It seems to work fine when the columns contain text, but I'm running into issues when using the canvas tag. Whenever I try to add space between the charts, they end ...

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment. In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lis ...

Guide to deactivating a control within a User Control

I anticipated that making this change would be straightforward, but I am encountering some difficulties. Initially, my asp.net markup for the server control appears like this: <ucTextArea:UserControlTextArea ID="taRemarks" runat="server" /> However ...

Show the current date and time, and update it whenever the user chooses a different one

I need help with displaying the current date and time within a div, with the seconds refreshing when the page loads and changing when the user selects another date and time from the picker. I'm trying to accomplish this with the following script, but ...

Element with negative z-index overlapping background of parent element

I am currently working on creating a CSS3 animated menu, but I am facing an issue where elements with low z-index values are displaying on top of their containing elements. This is causing the "sliding out" effect to be ruined. Here is the HTML: <html ...

display data in a sequential format

Within my MySQL database, there exists a table structure which I will share as a reference: +----+--------------+---------+--------+-----------+ | id | name | place | number | type | +----+--------------+---------+--------+-----------+ | 1 ...

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...