1 Topic by phishfan (edited by phishfan 2015-09-30 00:47:31)

  • Registered: 2012-05-15
  • Posts: 10

Topic: White line showing up on right of mobile gallery (iPhone 6+) [SOLVED]

Hello,

You can see on one of my sites' galleries, http://www.mattytat.com/artwork/artwork for example, that there is a white line showing up on the right of the entire page (on an iPhone 6 plus at least), and I'm pretty sure it wasn't there until I did the recent 1.4.4 update (I just did the hotfix one today, but read that it's the same JS and CSS, just that new meta tag, which I put on my pages anyways even though I don't think I'm using a full screen gallery).

Do you have any idea where that white line is coming from, is it by design? It's hard to troubleshoot because it's a "mobile view", so I can't just resize my browser to replicate it.

Also, with the new metatag, does that take the "place of" the regular viewport tag? (I had just <meta name="viewport" content="width=device-width, initial-scale=1.0" /> before, and I replaced it with <meta id="jb-viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0"/> . Since the new metatag has an ID, should I keep my older one too or is it redundant with the new one?

thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: White line showing up on right of mobile gallery (iPhone 6+) [SOLVED]

It looks like the white line you refer to is visible in desktop browsers, too.
There is a horizontal scroll bar on your web page and if you scroll to the right, you should see the white line.
It seems to be spanning the whole content of your page rather than just your gallery so I don't think the gallery is the root of the problem.

I'm pretty sure it wasn't there until I did the recent 1.4.4 update

You could test this theory by reverting to whatever version you used before the update. I don't think it will help but it might eliminate (or point towards) Juicebox v1.4.4 being a possible cause.
Also, you could temporarily replace the gallery with just a plain empty <div> with the same dimensions that your gallery would have to see if the gallery has any effect or not.

Being that the white line is visible in desktop browsers, it might be a little easier to troubleshoot using your browser's developer tools.

I notice that if you prevent the 'bootstrap.min.css' file from being loaded, the horizontal scrollbar goes away and the thick white line to the right of the content is spit evenly into two thin white lines to the left and right of the content.

I think the layout of your page is somehow the root of your problem but, unfortunately, there is a large amount of CSS on your page (in several external files) and pinpointing the exact cause of the problem might be difficult (although I'd start be searching through your CSS looking for margin and padding rules).
I hope this at least points you in the right direction.

With regard to the meta viewport tag, the version of the tag in our blog entry is required only for full-browser gallery pages (where the gallery has dimensions of 100% x 100% and is the only content on the page). As your gallery is embedded in your web page alongside other content, this tag is not required and you can just keep your existing tag.
As the long tag contains all the 'content' that your existing tag uses, you could just replace your existing tag with the long version (if you were to use it).

  • Registered: 2012-05-15
  • Posts: 10

Re: White line showing up on right of mobile gallery (iPhone 6+) [SOLVED]

Thanks, you were totally right... It was a Bootstrap 3 issue, and adding .row{margin-left:0;margin-right:0;} to my custom CSS after the BS CSS solved it ;-)

thanks again!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: White line showing up on right of mobile gallery (iPhone 6+) [SOLVED]

I'm glad you've been able to solve your problem.
Thanks for letting me know.