The HTML div element is not expanding to the full width of the screen on an iPhone device

Recently, I encountered an issue while testing my website on the iPhone. The footer was not covering the full width, especially on Safari browser. After some digging, I realized that the problem might be caused by an absolutely positioned DIV called #leaf-print within the #header.

Despite going through numerous articles on Stackoverflow, I couldn't find a solution. The website in question is located at: www.azumis.com/clients/onaturals. Ideally, I am looking for CSS code to adjust the viewport width on iPhone screens to 952px. Any assistance would be highly appreciated. Thank you!

htmliphoneioscss

Answer №1

It appears that your current code is causing some styling issues.

html,body{
  width:952 px;
}

To resolve this, consider updating it to:

html,body{
  width:100%;
  margin:0;
  padding:0;
}

HERE IS A SCREENSHOT AFTER THE CHANGE

However, the issue persists due to:

Even after setting html,body{width:100%;}, the following code overrides it:

body{
  width:952px; /* This overrides the previous width:100% declaration */
}

Please update the above snippet to:

 body{
   width:100%;
   margin:0;
   padding:0;
   overflow-x:hidden;
 }

Additionally, adjust the #footer styling from:

 #footer{
   width:1024px; /* Update this to width:100%; */
 }

If the issue still persists, try using the following code:

 #footer{
   width:100%; /* Update this to width:100%; as well */
   position: absolute;
   right: 0;
   left: 0;
 }

Answer №2

Although this question is a bit dated, I recently encountered a similar issue with some HTML that was provided to me for review. After some puzzling over it, I discovered that the solution was actually quite straightforward.

To resolve the issue, simply delete the following line from the <head>

<meta name="viewport" content="user-scalable=no, width=device-width" />

Since your design is not responsive, disabling user scalability and setting the device width in the viewport meta tag will ensure that your website behaves like a non-responsive site on mobile devices. By removing this unnecessary element, you can avoid issues with elements not displaying properly at 100% screen width. If you check how your HTML renders on iOS, you'll notice that the body and HTML tags only occupy half of the screen.

To further investigate the problem, you can use the iPhone Simulator feature in Safari's Developer menu when using an iOS simulator. This will give you the ability to inspect your code as it runs within the simulator, providing a valuable tool for developers who have been missing this feature. It may seem like an odd implementation by Apple, but it's definitely a welcome one!

I hope this solution helps you resolve your issue! ;)

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

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

I am looking to understand how I can seamlessly transition from a hover-triggered animation to an exit-hover animation, regardless of where the hover animation is in progress. Currently, if I exit hover too quickly, the animation jumps back to its starting ...

jquerycssanimation

Move the menu button to the right of the title slide, beyond the edge of the card

Having an issue with the MuiCardHeader component. <CardHeader disableTypography avatar={renderAvatar()} action={ <IconButton onClick={toggleMenu}> <img src={MoreIcon} alt=""/> </IconButton ...

javascriptcssreactjsmaterial-ui

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

Trigger a notification based on the selected choice

Here is some sample HTML code: <div id="hiddenDiv" style="display: none;"> <h1 id="welcomehowareyou">How are you feeling today?</h1> <select name="mood" id="mood"> <option value="" disabled selected>How are you feeling?</o ...

javascriptphphtml

The not:first-child selector targets all elements except for the first one in the sequence

This is a simple js gallery. I am using not:first-child to display only one photo when the page is loaded. However, it does not hide the other photos. You can view the gallery at this link: (please note that some photos are +18). My objective is to hide ...

javascripthtmlcss

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

Creating a Star Rating System Using HTML and CSS

Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistanc ...

javascripthtmlcsssalesforcevisualforce

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

htmlcss

Is there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...

phpjqueryhtmlwordpress

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

htmlangularjsangularjs-ng-repeat

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

javascripthtmlvalidation

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

javascriptcssreactjsflexboxmaterial-ui

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: Edit: code has been added below < ...

csshtmlsvgflexbox

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Setting a bookmark feature in HTML using localStorage: A step-by-step guide

I'm working on a simple code that captures the text content of a dynamically updated <h1> element and stores it as a "bookmark" in localStorage. I want to enable users to save or delete the bookmark by clicking a button. Below is a basic version ...

javascripthtmllocal-storage

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...

javascripthtmljquery

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

javascriptjqueryhtmlcss

Prevent users from selecting an option depending on a specific criteria

I need help with disabling select options based on specific time instances. For example, I want the user to provide specifications by 6:00 am in order to use the system at 10:00 am, ensuring there is a 4-hour gap between the two times. So, after 6:00 am, t ...

jqueryhtml