The overlay on the mobile device is too large for the screen

I've designed a basic div overlay using the CSS code below:

position:absolute;
top:0;
left:0;
display:none;
cursor:default;
z-index:101;
width:100%;
height:100%;

To show the overlay, jQuery is utilized. Everything works perfectly on desktop browsers, but there's an issue on mobile devices where the div doesn't cover the full height of the screen. I've attempted adjusting the dimensions using screen.width and screen.height..., with no success.

I also tried adding 

<meta name="viewport" content="width=device-width,initial-scale=1" />
to the index file, but that caused significant layout issues, making the overlay only 25% of the phone's width.

This situation is new to me, and I can't spot any problems in the CSS code. Any suggestions?

jqueryhtmlcss

Answer №1

Consider replacing position:absolute with position:fixed. 

position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:.5;
cursor:default;
z-index:101;
width:100%;
height:100%;

Answer №2

Instead of specifying the height, consider setting the bottom value to 0


position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
display:none;
cursor:default;
z-index:101;

Incorporating screens would enhance the user experience.

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

Guide to making a single row beneath two columns using CSS Grid

My goal is to utilize CSS Grid in order to design a blurb layout featuring 2 columns at the top and a full row below. This will allow for an FA Icon and Title, accompanied by a full description below, similar to the image provided. I believe I have succes ...

htmlcss

Switching the focus of detection from a child to a parent

I am currently working on enhancing the functionality of my UI to display selections dynamically as they are selected or de-selected. import { Wizard } from './report-common'; import { Router } from '@angular/router'; import { DataServ ...

htmlangulartypescriptdata-bindingangular5

Issue with CSS Transform Causing Rendering Errors in Both Chrome and Firefox

While a pixel here or there can be overlooked, in this case, precision is essential for the perfect rendering of this simple menu. The spacing between menu items must be impeccably equal to avoid any merging or disjointed appearance. Currently, the sep ...

htmlcsslayoutvertical-alignmentcss-transforms

I am experiencing an issue where the CSS file in the wwwroot directory does not update when I make changes to the code in ASP.NET MVC

Here is a link to my CSS file: Click here for image description This is how the file looks when built (no changes): Click here for image description Occasionally, running "clean-solution" and "build-solution" fixes the issue, but it's not working no ...

c#cssasp.net-mvcuploadwwwroot

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

Performing an AJAX GET request to the API after a set time interval

The API is constantly updating with live values, so I am attempting to fetch the data every second and display it on the webpage. Although I used a GET request call every N seconds using set_interval(), the values only load once and do not update with eac ...

javascriptphpjqueryajaxapi

What is the method to extract the content located within the <body> element using requests.get()?

I attempted to utilize: from json import loads from requests import get text_inside_body_tag = loads(get('https://Clicker-leaderboard.ge1g.repl.co').content) However, it keeps throwing an error related to loads expecting a bytes object or when ...

pythonhtmlpython-requests

My div is currently being concealed by a jQuery script that is hiding all of its

Below is the current code snippet: jQuery(document).ready(function($) { $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { $("#available-widgets-list div:not([id*='layers-widget']) ...

javascriptjqueryhtmlcss

The compilation process in my gulpfile is not successful

I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. Howe ...

csssassgulp

The symbiotic partnership between JSF bean and the dynamic capabilities of HTML

As I develop my project in JSF using Primefaces 4.0 and a Tomcat 7 server, I encounter the need to retrieve an image from a MS SQL database and apply clickable areas on it. The coordinates for each area are also obtained from the database. Unfortunately, t ...

htmljsfhtml5-canvas

The session becomes obsolete when redirecting back to the previous page

When attempting to redirect using the http referrer after storing a value in Session in php, I noticed that the Session becomes null. Is there a method to maintain the session even when utilizing the http referrer? ...

phphtmlsessionreferrer

Comparison of Foundation5 source ordering: main content versus sidebar

I recently set up a layout with three columns using ZURB Foundation 5. The two sidebars are on the left and right, while the main content area is in the middle. While trying to follow the source ordering instructions in the documentation, I encountered so ...

cssresponsive-designzurb-foundationfrontend

Ensuring the correctness of phone numbers by validating them with country codes through the use of

I'm currently working on validating phone numbers using intl-tel-input, following the example provided at Below is the code snippet I've been using: var telInput = $("#phone"), errorMsg = $("#error-msg"), validMsg = $("#valid-msg"); // initial ...

javascriptjqueryintl-tel-input

Spacing issues in Bootstrap footer on mobile devices when resizing left and right

Recently, I added a new footer to my Twitter Bootstrap website and noticed that when I resize the window, gaps appear on the left and right sides. I understand that this issue is related to the following CSS code... @media (max-width: 767px) { body { ...

htmlcsstwitter-bootstrap

Sending information from one ajax request to anotherORTransferring

Apologies for not including code in this post as I am currently working on a project in a car without internet access. Thankfully, I am using the amazing Stack Exchange app. Currently, I am facing a challenge where I need to work with two separate API cal ...

javascriptjqueryajaxapi

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

The challenge of loading multiple objects asynchronously in three.js

When I try to load multiple models onto the same scene simultaneously, only one model is successfully loaded. For instance, if I have a building scene with various objects like chairs and toys inside, only one object gets loaded when I try to load them all ...

javascriptjqueryasynchronousthree.js

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

javascriptjqueryhtmlcss

At times, the loading image fails to appear on Ajax

Take a look at my code below: function apply_image_effect(){ $.ajax({ url: "image/image.php", global: false, type: "POST", data: ({my_color:encodeURIComponent($('#my_color').val()),my_size:$('#my_size&apos ...

javascriptjqueryajaxpostget