I am unable to click on items due to an obscure element blocking my

My selling webpage, created with Asp.net and CSS, is experiencing an issue where text boxes and hyperlinks are being overlaid, making it impossible to click on them when accessed via a mobile device. I've tried troubleshooting on my own without success, so I'm reaching out for assistance. I would greatly appreciate if someone could take a look at the page source code and utilize Inspect Element to help me resolve this issue. I am still new to programming and not fully knowledgeable on how to troubleshoot this issue.

You can find the problematic webpage at , but please note that you will need to be logged in using the following credentials: Username: [email protected] and Password: qwerty on this page:

While the webpage functions correctly on a laptop, the issue arises when accessed on a mobile device where only the photos (sellers items) are clickable. Unfortunately, the code is too extensive to post here, so I kindly ask if someone could directly inspect the page for me. Your help is greatly appreciated.

cssasp.net

Answer №1

It appears that the credentials you have provided are incorrect, but I'm happy to take a closer look.

Edit:

Here is the code that you can add to your CSS file:

.stallNew > div:nth-child(2) > div {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  width: 320px;
  pointer-events: none;
}


.stallNew > div:nth-child(2) > div select, .stallNew > div:nth-child(2) > div textarea, .stallNew > div:nth-child(2) > div input, .stallNew > div:nth-child(2) > div a {
  pointer-events: auto;
}

Edited:

Your HTML code seems messy and could benefit from refactoring. In the code above, I have utilized the pointer-events attribute to make elements transparent, allowing for click-through functionality. If you want specific elements within those with pointer-events: none to be clickable, you must set their attribute to pointer-events: auto.

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

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

htmlcss

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

I have a collection of HTML documents that contain basic text encoded in Windows-1252, but scattered throughout the content are various instances of span elements styled with font-family: Symbol. For instance: <span style='font-family:Symbol& ...

htmlcssencodingcharacter-encodingfonts

Attempting to contain the dimensions of the image within the confines of the card results in failure

Currently, I am designing custom cards featuring an image in the form of a water droplet... However, I am encountering difficulties in maintaining the proper drop shape across varying screen resolutions. Any guidance on this issue would be greatly valued. ...

cssreactjsmaterial-ui

Ways to make a button blink using AngularJS

Currently working on an AngularJS SPA application where a button is present in the front-end HTML page. When this button is clicked, it triggers an operation which takes some time to complete. I want to inform the user that the operation is still in prog ...

javascriptangularjshtmlcss

Achieving a dynamic arrangement of rows in a datatable in ASP.NET where the last row becomes the first row and maintains the same order for

I have initialized a DataTable object with a column named "Month" and filled it with dates: Month(Column name) 05-oct-2014 06-Nov-2014 02-Dec-2014 02-jan-2015 01-feb-2015 20-mar-2015 I then populated my dynamic table with this data. Now, I am looking to ...

c#asp.net

Ways to switch out event listener when button is deactivated

I find myself in a situation where I need to switch all unauthorized controls on my UI from a hidden state to a disabled state. Additionally, I want to add a tooltip with unauthorized text and have the control display this text when clicked. While I am ab ...

javascriptjqueryhtmlasp.netonclick

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...

cssreactjsbackgroundtailwind-css

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

javascriptjqueryhtmlcsstwitter-bootstrap

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...

cssreact-native

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

htmlcsscss-tables

The JQuery datepicker lacks the ability to format dates

I am facing a challenge with the JQuery datepicker plugin. The issue lies in formatting the date it displays. Currently, it shows the date in the format mm/dd/yy, but I need it to be in the format yy/mm/dd. Here's what I have attempted: $("#" + cont ...

jqueryasp.net

Please select the links located beneath the see-through triangular or polygonal shapes

Review the code snippet provided at the following link: http://jsfiddle.net/q8Ycz <div style="background-color: red; width: 200px;" onclick="alert('behind')"> <div><a href="test">test test test test test test test test test ...

htmlcsssvg

Looking to refresh image file in c#

In a single large folder, I have 800-1000 folders each with a unique name. Within every uniquely named folder, there is a subfolder named /images. Inside the image subfolder of each folder, there is a file named "Rock-Star-Site-Design-{UNIQUEFOLDERNAME ...

c#asp.netvb.netc#-4.0

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

My goal is to develop a Single Page Application using Vue3 and the Bootstrap 5 framework with a simple layout of Header -> Content -> Footer. I want the Content section to fill the space between the header and footer, ensuring there is no overlap. Ho ...

javascripthtmlcssvuejs3bootstrap-5

Identifying and handling overlay blockers using Selenium technology

Currently, I am conducting tests on a website that utilizes in-browser pop-ups to display details about objects. These pop-ups are occasionally modal, meaning they render the rest of the screen unusable and activate a gray transparent overlay that covers e ...

cssselenium

How can I ensure a div always moves to the right by using margin-right auto?

How can I align a div to the right using margin-right auto? I attempted margin-right: auto; and margin: 0 0 0 auto; but it was not successful. ...

htmlcss

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

jqueryhtmlcsssticky

In certain situations, Chrome and Safari fail to trigger the unload function

Struggling with a persistent issue lately and really in need of some assistance. My goal is to perform a server-side callback to clear certain objects when the user navigates away from our page, without needing to click logout. Due to business requirements ...

javascriptasp.netajax