[Solved] Problem with responsiveness on mobile devices … iPhone, iPad

[cavetrol]

Hi!

I’ve tried everything but no luck so I thought someone might open my eyes…

Here’a demo : http://producr.sofarider.com

The problem persist in mobile Browsers only, especially in Safari (iPhone, iPad). Even though the template is built with Twitter Bootstrap (3.0) and should fit any viewport resolution it doesn’t seem to be the case… Initial/home page looks all right in both landscape and portrait mode. Any other, inner page is rendered with horizontal scroller! If you switch from portrait to landscape and vice versa, the content doesn’t stretch but rather remains locked to some strange width. It’s obvious that there is an extra space on right hand size but I can’t “catch it”.

I would really appreciate any feedback and am ready to buy a couple of beers once the problem is solved!

[StephBertha]

Hi there,

Usually when that happens, is when I have two rows back to back, like:

<div class="row">Hello <div class="row">Something else</div></div>

You know what I’m saying? Make sure you don’t have a row within a row. Classes such as col-lg-2, col-lg-6 have to be followed by a row.

Usually that’s what happened for me when I got the extra space on the right side. Otherwise, I’m not too sure. Do let me know if that worked? I haven’t quite checked out your site in detail.

[cavetrol]

OK, I’m 100% sure that something like

<div class="row">Hello <div class="row">Something else</div></div>

can’t be found. It’s simply not a part of my coding practice.
As for the nested rows…well, I guess that would have some sort of visual impact in desktop Browsers too because nesting rows without “container” reduces margin on left and right hand side. It looks like the problem persist in mobile Safari only.
I’ll continue my quest and see whether I’ll be able to come up with something.

Thanks a bunch for your hints!

[StephBertha]

Sure, I understand. It was just an example.

No worries, good luck!

[Author]

Posts