CODEWITHSUNDEEP
htmliphoneioscss
Seedorf
Seedorf

Reputation: 675

HTML div is not covering full 100% width in iPhone

I have uploaded a website to my server to test it on the iphone. However, the footer is not covering full width on the iPhone, especially on the Safari web browser. I believe this has something to do with an absolutely positioned DIV #leaf-print that I have in the #header.

I have looked at tens of articles on Stackoverflow, but still not able to find a solution. The site is located at: www.azumis.com/clients/onaturals. Ideally I would need some sort of CSS code to force the width of the viewport on the iPhone screen to 952px. Any help would be greatly appreciated. Thanks

enter image description here

Upvotes: 2

Views: 13664

Answers (2)

Eric
Eric

Reputation: 907

This is a bit of an old question, but I just had a similar problem with some HTML that was sent to me to make revisions to. It took a bit of head-scratching but I found that the solution was rather simple.

Remove this line from the <head>

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

Since your design is not responsive, you want it to be controlled like a non-responsive website when viewed on mobile devices. The viewport meta is not required and is causing the problem with elements not properly filling 100% of the screen. If you inspect your HTML as it is rendered in iOS you will see that your HTML & body tags only fill half the screen.

Open iOS simulator, launch your site in Safari in the simulator, then open the desktop version of Safari, and you will see an iPhone Simulator option in the Developer menu which will open an inspector window that is actually inspecting the simulator. Bizarre implementation on Apple's part, but being able to inspect HTML as it is run in the simulator has been a sorely missed feature for developers, so yay!

Hope this solves your problem! ;)

Upvotes: 3

RbG
RbG

Reputation: 3213

you are using 

html,body{
  width:952 px;
}

CHANGE IT TO

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

SCREENSHOT AFTER THAT CHANGE

STILL THE PROBLEM EXISTS BECAUSE ::

though you have made the change html,body{width:100%;} but again you are overriding it by 

body{
  width:952px; /*..why????..as you have done it after html,body{width:100%;} its overriding the width:100% to width:952px;
}

change it to 

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

and also make 

 #footer{
   width:100%; /*...instead of 1024px;...*/
 }

IF IT's STILL NOT WORKING THE FOLLOWING CODE MAY HELP YOU

 #footer{
   width:100%; /*...instead of 1024px;...*/
   position: absolute;
   right: 0;
   left: 0;
 }

Upvotes: 5

Related Questions