Android compatibility issue: 100% width not functioning correctly for two divs side by side in CSS

I am working with div0, div1, and div2.

Their configurations are as follows:

div0 has a width of 200% div1 is located inside div0 with a width of 50% (of div0) div2 is also inside div0 with a width of 50% (of div0)

When I view it on my computer, everything appears as expected. One div is visible upon page load, while the second one can be seen when I scroll. However, when I check it on my Android phone, both divs are displayed but appear smaller. This results in no invisible part of the page upon loading.

For example:

visit quizmaker.pythonanywhere.com/play/1

On a computer, there is a 3-second delay before both divs are shown.

On a mobile device, they are both visible from the start. How can I address this issue?

htmlcss

Answer №1

A viewport meta tag is essential for proper display on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Make sure to place this in the <head> section of your code.

Update:

The source code from the provided URL now includes the necessary viewport tag along with some basic HTML improvements (added doctype, html, and head tags).

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.full-width {
    width: 100%;
} 
#welcome{
    width: 200%;
    height: 100%;
    position:absolute;
    left:0%;
}
#welcome:target{
    left: -100%;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
}

#welcome > .main{
    width:50%;
    height:100%;
    position:absolute;
    left:0%;
}
#welcome > .continue{
    width:50%;
    height:100%;
    position:absolute;
    left:50%;
}

/* #welcome > .main > .q {
    position: relative;
    left: 25%;
} */

</style>
</head>
<body onload="timer=setTimeout(function(){ window.location='#welcome';}, 4000)">

<div id="welcome">
    <div class="main">
        <img class="q" src="/static/quiz.png" />
        <h2>ASapplications QuizMaker</h2>
        <br><h4>Faminator's quiz</h4>
    </div>
    <div class="continue"><h3>Please Wait...</h3></div>
</div>
</body>
</html>

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 method for extracting element.style.marginTop in digits exclusively?

Consider an HTML element with the property margin-top: 30px. function extractValue(margin) { /* to do */ } var element = document.getElementById("element"); alert(extractValue(element.style.marginTop)); #element { margin-top: 30px; } <div id=" ...

javascripthtmlcss

Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table? I want the button at the bottom to extend beyond the borders of the table. https://i.sstatic.net/VH0HP.png Do I need to abandon the table styling to achieve this effect? Check out this JsF ...

htmlcss

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

Issues have arisen with the @keydown.ctrl and @keyup.ctrl event modifiers in Vue.js, as they are not properly responding

I have a project in VueJS where I need to implement a custom context menu that will pop up when the user hovers over specific elements on the page. This context menu is dynamic, meaning it changes as the user moves between different items. If the user hold ...

javascripthtmlvue.jsvuejs2

chosen=chosen based on data from mysql database

Currently, I'm developing my own CMS that allows users to add and update their projects. While the adding function works smoothly, the updating process also functions properly. However, a problem arises when I click on a project (retrieving informatio ...

phphtmlmysql

When trying to display a div element within an li element using CSS on hover, the expected functionality does not seem to

Struggling to get this code snippet to work properly, I am attempting to display a div (inside an li element) when hovering over the img or li. Can someone provide guidance? HTML <ul class="step-nav clearfix" id="leftright"> <li class="pret bu ...

htmlcss

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face

assigning the browser's width to a variable within an scss file

Is there a way to dynamically set the browser's width as a variable? I am familiar with @media queries, but I need to calculate the browser's width for a specific purpose. I attempted using jQuery to achieve this, and it works well with a fixed ...

javascriptjquerycsssass

Query the database with a dynamic filter criteria

In this scenario, I have created a row using an additional jQuery mechanism to fetch the parameters required for data search. $(document).ready(function() { DataProvide(); ManipulationHere(); $('table').delegate('input[type=tex ...

phpjqueryhtmlmysql

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...

javascriptjqueryhtmlcssdrag-and-drop

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png I'm working on translating this into HTML and CSS so that I can further develop it. The HTML Code: <!doctype html> <html> <head> <title> Trinit ...

htmlcsslayoutwireframe

React application triggers `OnKeyDown` event just once

Hey there! I'm diving into the world of web development and could use some help. My current challenge involves manipulating input data based on key combinations like ctr + ArrowUp (increase) and ctr + ArrowDown (decrease). The dynamic part should be h ...

javascripthtmlreactjsonkeydownselection-api

Can the style of certain words within a paragraph be altered using CSS only, without the need for any HTML tags?

Is it feasible to alter the appearance of certain words within a paragraph using CSS solely, without applying any HTML tags to those particular words? Awaiting a positive response. Thank you! ...

htmlcss

Querying PHP to explore a sub-directory in search of a particular file

I've been searching for a solution to my issue. My website contains numerous files in various sub-directories within one main directory. I require a search functionality that can look for part of a file name and return the result, regardless of case s ...

phphtml

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Using mediastreamrecorder.js, I am successfully recording video in 5-second blobs within the ondataavailable function. Here is an example of the code: mediaRecorder.ondataavailable = function(blob) { blob=blob; }; While I am a ...

jqueryhtmlfile-uploadwebrtcyoutube-javascript-api

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

Is there a way to detect when Firefox (or any browser) is blocking mixed content using JavaScript or jQuery? To learn more about Firefox's mixed content blocking feature, visit: The backstory: My company has an external vendor that handles the onli ...

javascriptjqueryhtmlfirefoxbrowser

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

javascriptcssreactjsmaterial-ui

Angular renderer's setStyle method does not support the application of linear-gradient

Why won't Angular's renderer2 apply linear-gradient CSS in this code snippet? Can anyone provide insights? export class AppComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} public ngOn ...

cssangularangular-renderer2