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

Enable the ability to choose a cell even when a UISearchController is currently in use

Incorporated within the navigation bar of the parent UINavigationController, I have a UICollectionViewController with a UISearchController. The custom subclass of UICollectionViewCell utilized in this setup contains a single UIImageView element. The issue ...

iosswiftuicollectionviewuikit

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...

javascriptjqueryhtml

Does the browser detect the HTML version of the document?

I discovered that my HTML 4 document successfully utilized the required attribute from HTML 5, displaying a red error border when an input was left empty. It seems like the browser interpreted the document as HTML 5 and disregarded the DOCTYPE declaration. ...

htmlgoogle-chromehtml4

Display of CSS color choices organized by row input

Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...

csscolorsstylingcss-tables

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal

Utilize JQuery's appendTo() method along with html() function for seamless content replacement

I have a question about appending and replacing div elements. I am currently using the following code: $('.toggle_questions').appendTo('#'+sectionId).show(); While this works perfectly to append my div with the class .toggle_questions ...

javascriptjqueryhtmlappendto

Display the current date on a webpage using a Google calendar integration

I am struggling to display only today's events in my HTML output using this code. When I remove the line "if ($date = date("Y-m-d")){", the code shows a specific number of events. How can I modify the code to show all events that occur on a single day ...

phphtmldatecalendar

What is the best way to prevent card-group from wrapping on smaller screens?

What is the best way to ensure that cards in a card-group stay adjacent to each other on smaller screens? Currently, they are grouped together on larger screens but appear separated on smaller screens. I am currently hiding the additional cards on smaller ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Adding JSON data to an array in Angular JS using the push method

I am encountering difficulties with adding data to an existing array. Currently, I have set up a table to display the data, but I want to also include the data in the table when a user enters an 8-digit barcode. Factory angular.module('app.pickU ...

javascripthtmljsonangularjs

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

I am experiencing difficulties with certain images not appearing on my website

Everything was running smoothly while I was working on my website locally. However, as soon as I uploaded it online, some of the images refused to load and are now missing. I built my website using wordpress version 3.7.1. If you'd like to take a loo ...

htmlwordpress

how can I modify the css style of an html element only when a specific sibling is present?

After searching through the MDN CSS documentation, I was unable to find any Combinators that can target the specific element I want to style. /* second-span red when first-span is present */ [first-span] ~ [second-span] { color: red; } /* firs ...

htmlcss

Is it possible for me to add some PHP code to the action of a form?

Within a foreach loop, I have the following code that lists unique codes as links: <a href="" class="charcoal_link" style="line-height: 20px;" onclick="showMessageArea(this); return false;" > <?php echo $uniqueCode1?><span class="pink_tex ...

phphtml

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

Embed a data entry point into an existing picture

Looking for assistance inserting a field within an image for users to enter their email. Can someone provide the HTML code for this? Appreciate your help! ...

htmlcss

Guide on submitting a reply to Harvard's "Guess my Word" challenge using JSoup

I am currently working on developing a bot to enhance my gameplay in Harvard's intriguing "Guess my Word!" game. After some exploration, I found out about a post request feature available through Chrome's "inspect element" functionality when a pl ...

javahtmlhttpnetworkingjsoup

The time-sensitive greeting application is down, moving quickly

Can someone offer assistance with a time-based greeting app I am attempting to create in Swift? Currently, when I press return in the text field of my app, it freezes and Xcode directs me to AppDelegate with a line marked. The issue is unclear to me. Even ...

iosswiftxcode

Boosted by Bootstrap 4 running smoothly on Internet Explorer version 10

I'm starting to have second thoughts about my decision to move to B4. I'm currently troubleshooting the navigation in IE 10 using their example: https://getbootstrap.com/docs/4.0/examples/jumbotron/ After checking it on IE 10, I noticed that th ...

htmlcsstwitter-bootstrapbootstrap-4

Safari does not support onunload when the page is closing

<body onunload="notReady()"> <script > function notReady(){ alert("closing") } </script> </body> It seems that the script works only when refreshing the page or clicking a link on the page, but not when closing the pa ...

htmlonunload