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

What is the best way to adjust the color of the colon within my timer digits using a span element?

I am facing an issue with my timer where the span that was created to display a colon between the numbers does not change color along with the timer digits. I attempted using var colon = document.getElementById(":"); but it still did not work as expected. ...

javascripthtmlcsstimer

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

javascriptjqueryhtmlcssyii2

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

javascriptcssreactjsgatsbytailwind-css

End the connection with the HTTP Get/Request

I am currently facing some difficulties in my program where it seems to be getting stuck. I have a feeling that the issue lies either in sending or receiving the links. Despite searching for solutions online and seeking help from my professor, I'm una ...

htmlcsocketsget

You are only able to click the button once per day

I am working on a button that contains numeric values and updates a total number displayed on the page when clicked. I would like this button to only be clickable once per day, so that users cannot click it multiple times within a 24 hour period. Below i ...

javascriptjquerycsshtml

What steps should be taken to retrieve the contents of a file that has been chosen using the browse

You have successfully implemented a browse button that allows the user to navigate the directory and choose a file. The path and file name are then displayed in the text element of the Browse button complex. Now, the question arises - how can I extract dat ...

javascriptjquerypythonhtmldom

Google Fonts are displaying in a bold style even when the bold property is not set

I need assistance with an issue involving emails going from Salesforce to Outlook 365. Here is the HTML code snippet: <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <style> body ...

htmlemailoutlookgoogle-font-api

How to Reference a Local File in PHP using Zend Framework for jQuery's .Load Function

I'm currently working on a PHP Zend framework website and I'm trying to link to a local file. The file structure is as follows: public_html/application/views/index/filename1.phtml Within filename1.phtml, I want to make a jQuery call to load a ...

phpjqueryhtmlzend-framework

Is the <style> tag effective when placed within other elements?

When I look at it, I notice something along these lines: <div> <style type="text/css"> ... </style> </div> It seems weird, but it's functional. Does this go against any standards? ...

htmlcss

Tips on implementing vertical-align within an inline-table

Can someone help me with vertically centering text inside links without losing the 100% height of "a" elements? I've tried to tackle this issue without success, and I am using Twitter Bootstrap 3. Any suggestions would be greatly appreciated. ...

htmlcss

Is the presence of hidden list items leading to excessive white space?

I have a menu that appears when hovering over a list item. Here is an example: <li> <ul class="topmenu"> <li class="submenu"> <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt= ...

css

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

htmlcsstwitter-bootstrap

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

htmlcss

What is causing the tabs to not update the navigation in nav-tabs?

I recently implemented a tab list using Bootstrap, similar to the one shown in the image below: https://i.sstatic.net/KEy7F.png However, I encountered an issue where clicking on "Profile" or "Contact" tabs does not change anything. Even though I inclu ...

htmlbootstrap-4bootstrap-5

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

The (.svg) image does not cover the full width of the page

After creating an SVG image, I encountered a problem when trying to display it on a webpage. Even with the width value set to 100%, the image did not stretch all the way to the edges of the page, leaving small gaps at the edges. I attempted to switch the ...

htmlcss

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

I am currently facing an issue with my table that populates using ng-repeat. The table contains 100 rows, and clicking on any row reveals a new table (using ng-show) with more detailed product information. However, the performance of my web app is being af ...

javascripthtmlangularjsangularjs-ng-repeat

A step-by-step guide on extracting the image source from a targeted element

Here is a snippet of my HTML code containing multiple items: <ul class="catalog"> <li class="catalog_item catalog_item--default-view"> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_it ...

javascriptjqueryhtmlcss

Show Zeroes in Front of Input Numbers

I am working with two input fields that represent hours and minutes separately. <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes"> This se ...

javascriptjqueryhtmlcss