Incorrect CSS percentage calculations detected on mobile devices

My webpage consists of three large containers, each with an alpha transparent background. While they display correctly on desktop browsers, I'm facing alignment issues on tablets (both iOS and Android) and iPhones where the percentage sum seems to be incorrect.

<div style="position: fixed; top: 0; left: 0; right: 0; height: 10%;"> CONTAINER 1 </div>
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div>
<div style="position: fixed; bottom: 0; left: 0; right: 0; height: 5%;"> CONTAINER 3 </div>

I also attempted to assign 'bottom' and 'height' instead of just 'height' for containers 1 and 3, but while they work fine in desktop browsers, on mobile devices the boxes overlap by about half a pixel or have some spacing between them.

All three boxes contain the same PNG image with alpha transparency, resulting in darker color when overlapped. If fixing the percentage issue is not possible, it would be acceptable to find a solution (if one exists) that allows for overlapping without merging the backgrounds.

htmlioscss

Answer №1

It is important to include the meta tag in your code

<meta name="viewport" content="width=device-width" />

By doing this, you will ensure that the viewport width is set to match the device width

Answer №2

Is padding included in the width of your divs?

In general, when using percentage widths for CSS, the padding is not typically included in the calculation on most browsers. So, if you specify a width of 25% and add a padding of 5px, the actual width of the div will be 25% + 5px.

However, by utilizing the box-sizing: border-box property, most modern browsers (excluding IE7) will consider the width as inclusive of the padding -- meaning a 25% width div with 5px padding will still be 25% wide.

Answer №3

consider this alternative method: 

<div style="position: fixed; top: 0; left: 0; right: 0; bottom:90%;"> BOX 1 </div>
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> BOX 2 </div>
<div style="position: fixed; bottom: 0; left: 0; right: 0; top: 95%;"> BOX 3 </div>

the issue is that percentages can cause slight inconsistencies in pixel positioning. This may result in a one-pixel gap or overlap.

you can experiment with an alternate approach:

<div style="position:fixed;top:0;left:0;right:0;bottom:0;padding:10% 0 5%;box-sizing:border-box;background:yellow">
    <div style="position:absolute;top:0;left:0;right:0;height:10%;background:rgba(0,0,0,0.3);">top 5%</div>
<div style="height:100%;background:rgba(0,0,0,0.3);"> middle </div>
<div style="position:fixed;right:0;left:0;bottom:0;height:5%;background:rgba(0,0,0,0.3);">bottom 5%</div>
</div>

Sharing a codepen or fiddle would have made it simpler for everyone to assist you

Answer №4

While it may not function correctly on a mobile browser, the site works seamlessly on an Android tablet. Feel free to give it a try!

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

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

My goal is to restrict a text input field to specific characters only. I am looking to allow: alphanumeric characters (a-z A-Z 0-9) 3 special characters (comma, dash, single quotation mark) : , - ' A few accented characters: à â ç è é ê î ô ...

javascripthtmlregexangularforms

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

What steps should I follow to create a cohesive background design using CSS?

Is there a way to combine two separate div elements in CSS? Currently, the image Row and col are not connected to the above SVG blob. How can I utilize the blob as a background? Based on the code provided below, they appear separated and I'm unsure ho ...

css

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

javascriptjqueryhtml

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

I am working on a web application similar to mini-tweets. The content for the posts is retrieved from a database and I want to include an 'up vote' button for each post, similar to the image shown below. Each post has properties such as id, auth ...

pythonhtmlflaskformshttp-post

I'm curious about why I'm receiving the error "Unable to bind to 'ngFor' since it is not recognized as a property of 'li'. Can someone please explain why this is happening?

The issue is related to the *ngFor directive for nonvegfoodlist app.component.ts import { Component } from '@angular/core'; export class Menu { id : number; name :string; } const veg : Menu[] = [ { id:1 , name:'Rice'}, { id: ...

javascripthtmlangular

Is there a way to completely remove all styling from a specific child element?

Struggling with a drop-down menu issue - the parent element has a border, but I don't want that style to be inherited by the child sub-menu. Despite my attempts to remove the border using border: 0px, it's not working as expected. Is there any wa ...

htmlcssinheritanceparent-child

What are some ways to adjust red and green blocks using CSS?

One question that arises is how to create a version of a webpage where only the yellow block can slide up, while the red and green blocks remain fixed. Currently, the green block is treated with the following CSS: position:sticky; right:0px; top:100px; ...

javascripthtmljquerycssweb

Using multiple foreach loops within each other

After struggling with this issue for days, I've decided to seek some assistance :) I'm currently working on a project management tool that includes an edit-page where admins can modify project members and their roles within the project. My goal ...

phphtmltwitter-bootstrapfor-loopforeach

What could be causing my Font Awesome 6.1.1 icons to not show up after loading?

I'm currently enrolled in Brad Traversy's 50 Projects 50 Days course. On Day 26, which focuses on the Double Vertical Slider project, I noticed that the Font Awesome CDN being used is version 5.15.1, an outdated version. I have updated it to vers ...

htmlcss

Creating a photo grid with consistent order is simple using flexbox

I'm currently working on an image grid that consists of 2 rows laid out horizontally. Initially, the first row contains 4 images while the second row has 2 images. Users should have the ability to add more images to the second row. The issue I am faci ...

htmlcsssassflexbox

Exporting MySQL data to MS Excel is functioning smoothly on the local environment, however, it is encountering difficulties when

<title>Orders Export</title> <body> <?php header('Content-Type: application/xls'); header('Content-Disposition: attachment; filename=download.xls'); $con = mysqli_connect('localhost','suresafe ...

phphtmlmysqlexcel

Is there a way to insert a clickable hyperlink in the text of a MessageDialog?

I am currently working on MessageDialog code that looks like this: MessageDialog dlg = new MessageDialog("None of the images you selected contain location information. You can add your own after downloading http://exifpilot.com/"); await dlg.ShowAsync(); ...

c#htmlhyperlinkwindows-store-appsmessagedialog

Neglecting to review the CSS - embracing ejs layouts in Express

I am encountering an issue with the express ejs layouts where only the mainPage is able to read the CSS, while the other pages are unable to do so (even though the HTML reads it). Additionally, if I want to use another layout such as "layout2.ejs", what s ...

javascripthtmlcssnode.jsexpress

The button in my form, created using React, continuously causes the page to refresh

I tried to create a chat application using node.js and react.js. However, I'm facing an issue where clicking the button on my page refreshes the entire page. As a beginner in web development, please forgive me if this is an obvious problem. You can fi ...

javascriptjqueryhtmlnode.jsreactjs

Activate the zoom feature in jquery mobile

I am looking to implement the standard zooming effect in jquery mobile for my iOS iPhone app using jqm 1.3.2. After attempting the following: <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-s ...

javascriptjqueryiosjquery-mobile

Check to see if the date selected from the HTML5 date picker is in the past compared to the current date

When working with HTML, I have a task where I need to input a date (mm/dd/yyyy) using the new HTML 5 date picker: <input name="date" type="date"> My goal is to validate whether the date entered is older than today's date. $this_date = $_POST ...

phphtmlvalidationdate

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...

htmlcss

Exploring the world of jQuery animation and background colors with Animate()

I'm currently attempting to implement a basic pulse effect by utilizing JQuery to modify the background color. However, I am facing issues with animating the backgroundColor property. function show_user(dnid) { /* dnid represents the HTML ID of a ...

javascriptjquerycss