Maybe this could be of help… https://coderwall.com/p/ikrswg/bootstrap-3-grid-system-and-hi-density-small-screens-detected-as-xs
Seems like the Nexus7 is causing more than a few people some grief.
I wonder, though… even if it is detecting the screen to be smaller than it really is, why would it not then display the XS mode layout… which, in my case, would be a 2 column row. The images are set to fluid, and the columns are set to be 6 grids… so, even if it thinks the screen is small, why is it putting everything on a new line?
What is odd, too, is that I gave the row itself a background colour, so I could verify how far it extended, and it was actually displaying properly… the row went from edge to edge, not stopping at the right edge of all the columns.
It’s like a Float Left is being applied to everything… at least as far as everything being pressed up against the left edge.
Heck, even the whole page itself seemed to be offset to the left… so I guess that would either be the container or the body tag itself.
I keep thinking I’m simply neglecting some attribute, or some existing one(s) are either incorrect or conflicting… But, in my tests, I’m keeping it all simple and default… Drag in a Row, put it inside the Container in the tree… Drag in a Clear Column… Drag it inside that Row in the tree… Drag in an IMG tag… Drag it inside the Column in the tree… Target the image for my ‘photo’ test image… Set it to Fluid… and then just set a Top and Bottom margin, just to space the boxes apart a bit. And then set the breakpoint rules (grid with of the column at the various screen size modes), and then duplicate that column (with children) seven times, to give me the 8 boxes.
I’ll see if I can figure out something to test, based on that article… but, once we are getting into things like fallbacks, it’s unfamiliar territory for me. And server side stuff… forget it! 
I wonder if the same issue applies for the iTouch. But, if so, why not the iPad?
My understanding is that the breakpoint for xs is different to the Nexus display size.
Is that to say that instead of using the XS layout, it might instead use the SM one?
Even so, I’ve coded it so that it’s 2 columns, either way.
The row (itself) displays correctly (…I’ll have to verify that again, as things obviously changed)… it’s just the stacking.
This is some weird (and frustraing) stuff…
I don’t imagine there are many people out there, using an iTouch to view web content… (although, maybe I’m wrong)… so, I’m not too worried about that. The Nexus does concern me, though… especially in that I don’t know how other Android devices may display it, and it’s fairly popular as a device, I think.
I could possibly rework my site so that it doesn’t use columns for things like ‘gallery’ layouts. It’s something i have to sort out in the next few days. Would be a shame not to be able to use this all.
I’ve got to try looking at other bootstrap sites on the Nexus… and maybe check out the code (although it’ll probably be way over my head to decypher).
yeah not sure about the whole responsive thing ,columns etc, but like i said previous, the Nexus7 has 2 different resolutions that I could tell -and that was back in 2013 or something, so maybe even more now.
so, I though the @media queries could have been played around with too.
Also, as you noticed, I have falled foul of the project thing before. as in, I have modified say custom.css then… added some other pages…to a project, added some custome styles to a custom.css …and forgot there were already other styles in it from a previous pages styling… oops. they affected the later page - obviously, but It was spread over a few days, so had forgotten what I had dont. I have also changed the original bootstrap styles by accident… or the blocks one… by saveing the new style rules to them by accident.
All things to beware off when playing with the PineGrow Interface
I was actually surprised that the bootstrap.css is not protected somehow by default (or at least have an option to do so). I did accidentally add a rule to the bootstrap.css on my first day, having not noticed that IT was highlighted, rather than the style.css, as the one new rules would be applied to… or something to that affect.
I think I checked the Nexus to see if there was some way to change the resolution, but I didn’t find anything.
Something definitely got messed up with the user config, which caused some of the pre-made bootstrap blocks to have the same issue as was seen with my stuff on a Nexus and iTouch. Thankfully, Emmanuel suggested I have Pinegrow regenerate it, and that seems to have fixed that.
Well… even IF I figure out WHAT is causing the vertical stacking issue, I still have to find out HOW to fix it, too. That’s a journey I don’t particularly want to go on. I’m not doing websites as a career, for a reason! 
@ladlon can you check this page on Nexus device and let me know how it looks
http://www.invisibleinc.ie/pg/nexus7test/index.html
1 Like
Very close! The structure appears to be intact. It just has some other issues on the two devices.
On the Nexus, the page appears to be bigger than the screen (horizontally), so you get the scrollbars.
On the iTouch, it’s like it’s the opposite problem, where the screen seems like it’s too small, so you get this black vertical bar taking up the right half of the screen, which I assume is ‘void’ (non-screen).
On the Samsung, it works perfect. On the PC, it works perfect.
Here’s the pics of your test page on the three devices, in portrait and landscape:
Nexus (Portrait):
Nexus (Landscape):
iTouch (Portrait):
iTouch (Landscape):
Galaxy phone (Portrait):
Galaxy phone (Landscape):
I really appreciate your ongoing help with this.
I checked out your page coding, but didn’t see anything different, so I guess you did something with the style sheet? What did you try?
In the code you had provided earlier there were a lot of classes added to each column that didn’t belong there as far as I was concerned so I removed all of them and then just added back these classes col-xs-6 col-sm-6 col-md-6. Have you started from scratch because creating this layout without any extra stylesheets attached just a basic bootstrap 3 build.
Definitely… I’ve built that test about 5 times now, each time totally from scratch, and without any classes. The only thing I added, was some top/bottom margin (as a style on the tag itself), and checking the Fluid box in the image properties on the visual editor.
I did define more of the breakpoint columns sizes (ex. col-xs-6).
However, the original test may have had some classes and more formatting overall.
But, all the other tests were the same routine… container, row, column, image, change image, set to fluid, add top/bottom margin, define the breakpoint column sizes (usually xs, sm, and lg… sometimes all of them, just to be sure), duplicate the column 7 times.
Very odd that the problem went from vertically stacking, to horizontally stacking (all columns, regardless of screen size)… seemingly since I upgraded to 4.3, although that may have been a coincidence.
Oh, I should point out, all the tests/sites I’ve done so far have been Bootstrap4.
I’ll try a Bootstrap3 test and see how that looks.
Ok I’l try bootstrap 4
Can you try this link on your devices (Bootstrap 4 version)
http://www.invisibleinc.ie/pg/nexus7test2/index.html
1 Like
Okay, I tried your Bootstrap4 page on the devices…
(Photos will follow soon)
Nexus7: Big box is centered, but all the ‘thumbnail’ boxes are horizontally stacked in one row (…so, again, the issue went from everything stacking vertically, to everything stacking horizontally). But, it appears the page itself is properly centered.
iTouch: Wow… pretty broken. Zoomed in quite close to the bottom left corner of the big block(!) in portrait, and the left side of the big block in landscape. WTF?!
Galaxy: No issues, once again.
Can you retry it now.
Here’s the photos of your Bootstrap4 page on the devices:
Nexus (Portrait): (Note: All the other boxes are offscreen to the right, in the same row as the first two. The screen extends far to the right to accomodate the long row of boxes.
Nexus (Landscape): (Here you can see the other boxes, in correctly stacking horizontally (all of them in same row).
iTouch (Portrait): (Yikes…)
iTouch (Landscape) (…also yikes)
Retry report:
Nexus appears to be the same… Big box is properly centered. Two photo boxes below look correct (assuming a 2 column layout for Nexus portrait mode… BUT… all the other boxes are offscreen, to the right, on the same row as the first two. Landscape appears the same as the previous Bootstrap4 test.
The URL is the same as the last B4 test, right? test2?
@ladlon yes the same link as last time. This is a media query issue and without specifics on the device and browser I could be trouble shooting forever. Here’s a link to a site I’m testing it on and you’ll see it seems to render fine:
http://mobiletest.me/google_nexus_7_emulator/?u=http://www.invisibleinc.ie/pg/nexus7test2/index.html
If you use dev inspect tools you can see the code I’ve added to style.css (media queries)
I’ll have to look into that dev inspect tools thing… I’m not familiar with it.
Okay, one thing I noticed… I think the browser on the Nexus is not up to date. I’ve been trying to update it, but not getting anywhere. This is a friend’s device, so I can’t seem to get the password I was given to be accepted. Apparently I need to run the Play Store app in order to update the browser, and that needs the correct passworld… Once I get that sorted out, I’ll update the browser, and see if that changes things.
Sorry, I’m new to Android devices, and am kind of fumbling around on it. And since it’s not mine, I have limited access due to accounts, passwords, etc. I’ll have to contact him and see if he can help get this updated.
Thanks for all your help so far. Awesome of you. Really appreciated.
I’ll continue reading up and testing on my side, and will report back any worthwhile findings. If I get a solution at any point, I’ll definitely be posting it for others to see. The previous (solved) issue was when my preset Bootstrap blocks were not displaying properly (same kind of issue). That appeared to just be some corruption or inadvertant modification of the user config or something to that extent. Just had to delete the user folder, and have PG regenerate it (which also required a re-authorization, due to the registration files also getting reset).
You could try copying the code from here for the Nexus 7 to your stylesheet and experiment.
Okay, I’ll definitely look into that. I’m rapidly learning all this stuff. Pretty new territory for me, but so far, I think I’m pretty much understanding it. Thanks again!
UPDATE: Bloody hell, why is it so hard to update Chrome on a tablet?! Why can’t I just press a button and have it update. Instead, I need to run an app, enter a password, etc… The browser IS outdated, according to the ‘whatisyourbrowser’ site… which looked like it would allow me to update it easily, but then dumped me back to the app that needed the password. BUT, I now noticed the ‘Auto Update All Apps’ checkbox in the global tablet settings, so maybe now that it’s checked, it will update it without the need of passwords, etc. So, I just have to wait, I guess… I’ll retest everything once that is updated. I’ve also contacted my friend, who will hopefully give me the right password, just in case.