CODEWITHSUNDEEP
htmlcssresponsive-design
Nino
Nino

Reputation: 129

Css issue on IPhone device for super expert?

If you open http://docteur.tax on iphone 5 (or other version), you'll see a blank column on the right side (see screenshot below).

http://prntscr.com/c5wnfz

It seems something is reducing the width. If you check at the footer module, you'll see there is a real problem; as footer suppose to be 100% width.

The big problem I have is I am not able to debg this with Jconsole as all the Iphone simulator borwsers don't shoz this issue. It appears only from a real mobile device.

I search hours on google how to check the code from iphone. But nothing worked.

I don't have Mac laptop and no SDK.

I need help of super expert who has the tools to check HTML code by Firebug or Jconsole from mobile.

Thanks in advance to the one who could help me.

Upvotes: 0

Views: 72

Answers (3)

Artvader
Artvader

Reputation: 958

You could also install weinre (a bit old, but if you don't have other options...)

Upvotes: 0

Vcasso
Vcasso

Reputation: 1348

I found this:

.div_ebook {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

That set width in pixels will be wider than Iphone 5 viewport.

Upvotes: 1

Adam
Adam

Reputation: 518

It's because you've hard-coded the width of this section.

.div_ebook {
  width:380px;
}

and the internal sections are set to be 50% of that.

Set this to 100% and it will always keep the page tight.

I was also able to see your issue using Google Chrome's Developer Tools to simulate an iPhone 5. You should be able to use that for further debugging.

Upvotes: 1

Related Questions