Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" link is not working on mobile devices.

 <section id="home" class="offset">
            <div class="fullwidthbanner-container revolution">
                <div class="fullwidthbanner">
                    <ul>
                        <li data-transition="fade">
                            <img src="Images/Land.jpg" class="defaultimg" alt="" />
                            <div class="caption sfl bold bg text-center" data-x="center" data-y="180" data-speed="500" data-start="500" data-easing="easeOutExpo" style="margin-top: 0px; background-color: transparent; white-space: pre !important; text-transform: none !important; overflow-wrap: break-word !important;">Get any IT & BPO Project delivered by Trusted Firms</div>
                            <div class="caption sfb icon bg" data-x="280" data-y="260" data-speed="500" data-start="800" data-easing="easeOutExpo"><span>#Free-Consultations</span></div>
                            <div class="caption sfb icon bg" data-x="490" data-y="260" data-speed="500" data-start="1000" data-easing="easeOutExpo"><span>#Cost-Savings</span></div>
                            <div class="caption sfb icon bg" data-x="650" data-y="260" data-speed="500" data-start="1200" data-easing="easeOutExpo"><span>#Payment-Security</span></div>
                            <div class="caption sfb icon" data-x="340" data-y="360" data-speed="500" data-start="1600" data-easing="easeOutExpo">
                               <a href="Customer/Post_Project.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Post a Project</a>
                            </div>
                            <div class="caption sfb icon" data-x="640" data-y="360" data-speed="500" data-start="1800" data-easing="easeOutExpo"><a href="Customer/Post_Talent.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Hire a Developer</a></div>

                            <%--<div style="width: 50%; float: right; margin-top: 150px; text-align: center;">
                                
                            </div>--%>

                        </li>
                    </ul>
                    <div class="tp-bannertimer tp-bottom"></div>
                </div>
                <!-- /.fullscreen-banner -->
            </div>
            <!-- /.fullscreen-container -->
        </section>

Seeking guidance on how to make these hyperlinks clickable on mobile devices.

htmlcssbootstrap-4

Answer №1

There seems to be an issue that is preventing the desired functionality, based on the following observations:

  1. Testing in device mode on Chrome was successful, but the same functionality is not working on my iPhone 6 Plus.
  2. There are no JavaScript warnings related to this issue.
  3. The link markup is present (long pressing the button while the slider is open on an iPhone displays the iOS menu at the bottom with the URL option to open in a new tab).

It appears that there might be something blocking the touch event. To address this, you can try the following workaround:

<script type="text/javascript>

jQuery(document).ready(function($) {
  $("#buynwa").on("touchstart", function(event) {
      window.location.href = $(event.target).attr('href');
    });
 });

</script>

Insert this code just before the </body> tag in your footer.php file, below any other scripts. This code will capture the touchstart event on the first anchor tag in the first slide, extract the href attribute, and navigate to that page. If it works, you may need to adjust the $("#buynwa") part of the code to include other ids of anchor tags as there doesn't seem to be a common class shared between them. You can inspect element and modify the jQuery selector to include other ids like $("#buynwa, #id2, #id3").

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

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

csshtmlopacity

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

htmlcsscss-selectors

Design a Bootstrap dropdown menu featuring various options within an icon container

I have designed a blade with a signboard containing multiple columns, each displaying its name, color, and assigned cards (screenshot). To enable sorting of these cards, I added an icon next to each column title. My goal is to allow users to select sorting ...

htmljquerycssbootstrap-4

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Mastering the Art of Resizing Video Controls: A

https://i.stack.imgur.com/jTgap.png https://i.stack.imgur.com/Exf6Y.png On the initial screenshot, the video player displays normal controls. However, on the same website with identical CSS, the second video player shows different control settings. // C ...

javascripthtmlcss

Utilize a Chrome Content Script to intercept jQuery delegated event handlers and take control

After developing a Chrome extension that intercepts form submissions in specific circumstances, I encountered an issue with a particular website utilizing jQuery's delegate function. My extension is built with raw JavaScript, excluding jQuery to prev ...

javascriptjqueryhtmlajaxforms

Utilize Flexbox to position a group of items in the center of the page, while placing a single item at the bottom for added emphasis

I have utilized Bootstrap 4 along with some custom CSS to create a hero section where all items are centered both horizontally and vertically. The only exception is one item that I want to align at the bottom of the page while still keeping it centered ho ...

cssflexboxbootstrap-4

Tips for preventing words from being split between lines in an error message

I am encountering a problem in Angular 2 where error messages are being split onto two lines when there isn't enough space for the entire word. Check out this screenshot for reference Is it possible to prevent words from being divided across lines? ...

htmlangular

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

Arranging elements next to each other in HTML

I'm currently in the process of building my first website as a developer and I could really use some assistance. I'm trying to align two items next to each other horizontally, but since I don't have experience with coding HTML, I'm feel ...

htmlwordpressgoogle-maps

There seems to be an issue with the rangeslider.js jQuery plugin not being recognized as a function within the project. However, there are

I am currently working on integrating a Range-slider into my Django project with the help of rangeslider.js. I was able to successfully create a functional example on Codepen at https://codepen.io/Slurpgoose/pen/GRRpmpX, and everything seemed to be running ...

javascriptjqueryhtmldjangorangeslider

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

Enable Element Blocks Content Below When Toggled

Is there a way to make a toggle element completely block out all content below it? I attempted to set the width and height to 100%, but it ended up cutting off the content inside the toggle element. ...

htmljquerycsstoggle

The color of the text changes based on its alignment

Utilizing style sheets and attribute selectors, create styles that will change the color of text displayed on the page based on its alignment (e.g. left-aligned text in blue, right-aligned text in green). Additionally, text within h2 tags should have color ...

htmlcss

Display a pop-up window after a set amount of time and automatically close it when clicking on an

I am looking to implement a functionality where my popup box opens automatically after a specific time interval (e.g. 5000 milliseconds) and can be closed by clicking on an anchor tag placed inside the popup box. function openPopup() { $('.popup- ...

jqueryhtml

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

Astro component experiencing script tag malfunction within content collection

I'm trying to create something using a script tag, but for some reason the script doesn't seem to be working properly. Below is my content collection: --- title: Essay Similarity stakeholder: THESIS articleDate: 05 Feb 2023 projectStart: 2022-08 ...

htmltypescriptastrojs

Filter and transfer data from one Angular array to another

As a newcomer to Angular, I am working with an array of events containing multiple arguments. My goal is to filter these events and separate them into two new arrays: upcoming events and past events. Below is a snippet of the TypeScript code I am using: a ...

htmlarraysangulartypescript

What is the best way to merge multiple chunks of arrays into a single array

What I currently possess: let json = { key1: 'value1', key2: 'value2', key3: { title: 'yeah' } } let path = ['key3', 'title']; My goal is to concatenate segments of the 'path' array ...

javascripthtmlarraysjson

Tips to position a div directly on top of table cells using absolute positioning

I have a div inside the second table cell that I want to position absolutely right outside the <td>. Currently, the issue is that the <td> elements below are overlapping the div. Eventually, each <td> will contain a div that appears on ro ...

htmlcss