Items in rows are stacking vertically on mobiles

[ladlon]

Hi. I have a standard container > row > columns ‘thumbnail gallery’ type of setup, which works perfect when viewed on a desktop PC (the array of thumbnails adjusts as I scale down the browser window, going from 6 thumbnails across (in a big window) to 2 thumbnails across (in a small window). All good…

But, when viewed on an iTouch or Nexus6 tablet, all the thumbnails stack vertically, regardless of anything… almost like there’s a ‘carriage return’ after each thumbnail.

I suspect it might be due to a css rule I have applied to the thumbnail image elements, where they might be designated as Block items (to allow for centering), but it’s odd that it works fine in Pinegrow (on the sm and xs display modes, as well as in various device display modes), as well as working fine in a browser on my desktop computers… almost like anything ‘non-windows’ will display it wrong.

I added a coloured background to the various elements, just to see their actual borders, and despite having a bit of padding on the left/right sides, the thumbnails appear as if they should be able to fit 2 across within the row. So, I’m not really sure what could be going on.

The only theory I have so far, is that it’s due to some of the CSS rules… Block element? Padding? Lack of a Max-Width somewhere? Still, it’s odd that it does work on all the PC machines.

Any ideas what might be causing this? In the meantime, I’m going to continue tinkering and see if I can find out what the problem is.

To be a bit more specific, here’s the structure I currently have:

-Container for entire page/site
–Div (for each main section of the site)
—Row (for each row of thumnails in each section)
----Column (for each thumbnail in each row)

Should I just have the one container holding all of the page (each div section), or should I instead have a container for each section (rather than the div), and no ‘continaing everything on the page’ container? The sectional divs are really just to organize my tree, so that each section of my site is contained within a div, rather than a bunch of elements/tags lying around in the ‘root’.

So, for example:

Overall Container
-Div:Animation section
–Row: Thumbnail row 1
—Column: Thumbnail 1
—Column: Thumbnail 2
—Column: Thumbnail 3
–Row: Thumbnail row 2
—Column: Thumbnail 4
—Column: Thumbnail 5
—Column: Thumbnail 6

-Div: VFX section
–Row: Thumbnail row 1
—Column: Thumbnail 1
—Column: Thumbnail 2
—Column: Thumbnail 3
–Row: Thumbnail row 2
—Column: Thumbnail 4
—Column: Thumbnail 5
—Column: Thumbnail 6

Should I get rid of the main container, and make each sectional div into a container? What might be causing the columns to be stacked vertically on mobile devices (but not on Windows desktops)?

[ladlon]

An update to this mystery…

I did the following tests since creating the original post above, and got the following interesting results:

1. I created a new and simple test sample, using the same Container > Row > Columns structure I was using on my sites from scratch, just to be sure it was not some hidden attribute I was missing. It too worked perfectly in Pinegrow and my PC desktop (Firefox browser), and it also vertically stacked the columns on my iTouch and Nexus7 as well (like my sites did). Again, each column acting as if a carriage return was performed after each column, even though there is clearly room for the next column to go beside the previous one. (iTouch using Safari… Nexus7 using Chrome)

2. I created a blank Bootstrap4 Blocks test page, dragging in only the one ‘thumbnail gallery’ type of block (which was similar to what I was trying to do manually with my sites), and had a look at how they were coded. They definitely were coded a bit differently, with more divs than the standard Container > Row > Column structure. So, initially, I thought that might be it (another div required somewhere?)… yet, all the tutorials show the structure as Container > Row > Column… so that SHOULD work (…and does, on my desktop PC… but not on either of my mobile devices).

I then saved and uploaded this page (consisting of just the one Bootstrap ‘thumbnail gallery’ block, which I know was coded correctly (as it was premade, and not done by me!), and viewed it on all my systems… It worked fine on my desktop PC… AND worked fine on my mobile devices. So, that’s a clue.

3. I had someone who had a iPad tablet check all my test pages, and all of them appeared to work properly. So, no problem on an iPad (…yet my iTouch displays things wrong… vertical stacking).

4. I now also set up a Samsung Galaxy phone with Chrome, and tried the test pages, and it too appears to display things fine.

So, at this point:
-Desktop PC (Firefox) works
-iTouch (Safari) vertically stacks, leaves blank area where 2nd column should be, putting next item under previous)
-Nexus7 (Chrome) has the same issue as the iTouch
-iPad (Safari?) works
-Samsung Galaxy (Chrome) works

Could it simply be that either the o/s or browser are out of date? Would that even cause this vertical stacking issue? All columns seem to have a carriage return after it, and are aligned to the left of the screen (row).

I’m sure it’s something simple, but I’m kind of stumped as to what is happening, and am very curious.

[schpengle]

he there @ladlon.
well to me, it would appear that your issue is device/browser specific.

safari and Chrome are webkit browsers, that is , that is the rendering engine engine they use.
so, things tend to mostly look the same in them.

Firefox is different.
but I suspect the precise VERSION of the browser may play a part (odd)

ie,
Nexus7 - chrome -webkit browser-broke
iTouch - safaro -webkit broken.

ipad safari- webkit -ok
samsung chrome webkit ok.

so check and compare the Browser VERSIONS on the broken/working versions.

then, finally,
@media queries!

check the resolutions of your devices (the broken ones) and see if you need to play with media queries in Pinegrow to effect the output and see the differences that made.

Also, I came a cropper the other day due to Firefox failing to render correctly.
that was due to the width setting for something as those effect things differently in different postings.
I did post that a little while ago.

and just a caveat, i am just a tinkering amateur, so someone else can happily step in and add too/correct my input if some of it is wide of the mark, and I will learn too

Good luck

[ladlon]

Hello again, schpengle! Thanks for the response.

I agree, it must be the VERSION of the browser, as I have tested on two Chrome systems, and one worked, while the other didn’t. And I more or less eliminated the theory that it’s an Apple vs PC thing, since one Apple product worked, and the other didn’t.

The ones that aren’t working ARE seemingly triggering the correct screen mode (and ATTEMPTING the correct arrangement of columns)… but something is pushing the 2nd column down and over (underneath the previous)… again, like a carriage return or a Block level item.

It’s hard to tell if this is ‘broken’ or if it’s working, and my understanding of what it should be doing is flawed. But, certainly, there is a discrepency between the different devices… so, I’m assuming the odd ones out are ‘wrong’… and they certainly aren’t doing what I WANT them to!

Ya, you bring up the whole webkit thing… something I’m not familiar with. I’ve seen it mentioned in various articles, etc… but it definitely seems that should be my next thing to research. I just don’t want to go too far into the rabbit hole. If I were actually trying to do this as a career, I’d definitely be pursuing more details and forcing myself to keep up to date on things.

I wish I had access to more devices, so I could really see if there’s any true compatibility issues. At this point, if I were to have to guess, I’d say that both my iTouch and Nexus7 need updating. I was even getting reversed results between them… where one test page would cause one to fail, and the other to work, then another page would do the opposite.

For a while, too, it seems that the container itself was offset, as ALL the content seemed to be offset to the left a bit, with more ‘whitespace’ on the right… but, in my latest test, that seems to have gone away… either for now, or permanently.

Some odd stuff at work… So many different combos of attributes that can affect other attributes, so sometime I go in circles, trying to isolate the one that is causing the trouble. I’m still fairly puzzled about things like when it’s proper to use the 100% width, max-width and liquid attributes. I actually had one thing where some of my rows(?) were offset to the left a bit (or, maybe they were a bit shorter in width)… resulting in the right side being indented in (to the left) compared to the other elements… Could not figure that out for a while, and then found it was because they were set to 100% width. Leaving that attribute blank caused the right edge to pop back into alignment with the right edge of everything else… a bit ironic, but I think I get it. Still, it’s stuff like that… simple little attribute things, that can really cause some frustrating mysteries.

But, at least I’m feeling a bit more confident that the sites ARE coded properly, and that it’s just that (seemingly) the browsers on those two specific devices need updating. I was glad to see all the test sites as well as the REAL sites i’ve been working on) worked perfecctly on an iPad. I thought it was just a Android issue, until I tried it on the Samsung Galaxy today (and it worked great).

So, still a bit of a mystery, but it looks like things are working overall. Still plenty for me to read up on… including the whole webkit thing. I’m trying to stay relatively ‘old school’, only to have maximum compatibility. I know the newer things CAN have good compatibility, but only through the use of fallback systems… and that’s just a bit too much for me to dive into (…again, I’m a hobbyist, as far as website building goes). Not a career pursuit, and I got PLENTY of other pursuits to … pursue.

[schpengle]

hee hee hee
I can certainly relate to
"and I got PLENTY of other pursuits to … pursue."

…and I think of folowing another one of them, every time a page breaks

let us know how it all goes

[Thomas]

Simple Post a live link to your Project and I’m pretty sure that some brave guy will tell you the truth (such as prefixing for older browers).

Cheers

Thomas

[ladlon]

Just to help you to visualize what I’m talking about, here’s a test page I did (horizontally centered green ‘title’ box, and some rows of columns containing a ‘photo’ box).

The one photo is a screengrab from my desktop PC, showing the page displaying properly.

On a smaller screen, the green box should stay horizontally centered, and the number of rows should reduce as needed, down to a minimum of 2 rows (2x6 grid width, defined for the xs space).

But, as you see in the other photo (a small Nexus7 tablet), the ‘photo’ rows end up horizontally stacked, even though there IS space for them on the right side (and, in fact the rows themselves DO extend to the right). As well, the green ‘title’ box moves to the left, rather than being centered.

As mentioned, it works so far on the PC desktop (all sizes of the browser window), on a iPad tablet, and on a Galaxy phone. But, it vertically stacks (just the columns, the rows DO extend the proper width) so far on a iTouch and Nexus7 tablet.

I’m still trying to read up and see if it’s not some attribute I need or have to alter the value of. Unfortunately, these are all the devices I have access to.

The coding is pretty much standard, bare bones… Container > Row > Columns (with all the columns given specific grid sizes for each of the breakpoints/screen sizes). As simple as it appears.

So far, I haven’t been able to find any other articles or users on the web, asking about the same situation… and I’m not aware if fallbacks are required. All pretty new to me, so I’m learning as I go here.

---

PC Desktop (Firefox)… This is how it should look (with the number of columns adjusting down to 2 on the xs screen sizes):

Nexus7 (Landscape aspect… sorry for making you tilt your head!):

Nexus7 (Portrait aspect):

As far as I can tell, the browsers for the two devices that are displaying things wrong are all up to date.

[Thomas]

as already mentioned:

Such graphic stuff is useless - I need to inspect code coming from a live-example.

Cheers

Thomas

[schpengle]

hi there @ladlon, yep, like @Thomas says.

while not actually being useless, it does explain exactly what your saying but… no one can find the problem in the code as… no one can see it

so if you post the code here, or if its MASSIVE, stick it on pastebin or something and add a link
then you they will have thier *ah ha! * moments and can help you.

othe only other solution is for them to recreate what you want , some other way, so nobody will know wha the problem was!

so stick the code here to be stared and laughed it . its ok, I laugh at my code all the time…when not swearing at it.

also, remember to clear your browser caches when making changes to styles inspecting. they dont always refresh and show you the current state of things

[ladlon]

I sent the file to support, and they tested it, and it worked fine on the devices they had (although they don’t have a Nexus7, and I don’t think they have an iTouch… which are the two devices it didn’t work properly on… the other devices were fine).

I’m new to the forum, so I wasn’t clear on how to include code (if it would be uploaded, or just typed into the post, or if I’d have to link to my webspace)… so while I am looking into that, I posted some pics, just to clarify what I was saying… hoping for some theories. Sometimes people complain that words are not enough, and insist on pics.

I did a very small test sample page (the one you see the pics of), so it’s small. I just have to look into how to provide it here. I noticed that even some of my typing on posts inadvertantly triggers some display/code modes, so I assumed that simply copy/pasting the code would be ‘really bad’ directly in a post… perhaps even against forum rules.

One interesting clue, though… Support DID point out that my project was done in the Bootstrap4 beta, and not the final (as I assumed it was). I had bought Pinegrow just after Bootstrap4 was released (final, I assumed). So, I’m not sure why it’s still the beta version… but, at least it’s good we found out that I’m not running the final version.

Bad thing is, there is apparently no way to automatically convert a beta version project to a final 4 version project… and I literally JUST finished two websites (plus the sample one)… which would all now be beta versions of Bootstrap, apparently. So, unless someone tells me otherwise, I think I will have to manually rebuild both sites all over again.

So, do I just copy/paste the code here in the message area to show you the code?

[ladlon]

UPDATE:

I had been running Pinegrow/Bootstrap 4.1, and just now noticed the alert about the 4.3 update. So, I installed that, and tried a few things:

-Loaded my test project (4.1) into 4.3, saved it, and viewed it (…I figured that probably wouldn’t changed things, but I figured I’d try it).

-Loaded my test project (4.1), and added new (additional) code, replacating the same structure as the existing code (so I’d have a side by side (or, technically above/below) comparison of 4.1 and 4.3 on the same code). No change.

-Created a brand new test page, identical to the original test one, in 4.3. Oddly enough, still no change. ALl the columns are stacked vertically, aligned to the left of the screen. So, it doesn’t appear it is a ‘beta’ issue.

Both the iTouch and Nexus7 are still showing the same issue, despite now using 4.3, and having done the code from scratch a few times now (to eliminate the chance of some typo or forgotten item).

[ladlon]

I tried copying/pasting the code here, but as I figured, it doesn’t work… So, could someone tell me how you properly display code within a message?

[ladlon]

Hopefully I did this right… Never heard of or used Pastebin before, but here goes…

https://pastebin.com/X8GTUv3V

…and for completeness, here’s a screenshot of the test running on my iTouch6… same issue as the Nexus7. But, fine on an iPad, PC desktop, and Samsung Galaxy phone.

[schpengle]

YAY!
well done on persevering!

now clever people can peer at your code and help out

[ladlon]

So, ya, that worked great… once I figured it out! Good to know!

This is a real mystery… I think the coding is probably correct (…afterall, it works on most of the devices, just not those two specific ones)… and it doesn’t appear to be a Bootstrap beta thing now. I’m starting to feel it simply won’t work properly on an iTouch or Nexus7. Maybe there’s some sort of fallback code I can use, but it’s beyond my scope (or desire) to spend a lot of time researching/learning all that. But, if someone can just say ‘type this code into your code over here…’, then I’ll gladly add it.

I’ve been doing more reading, trying to finally get a solid grasp on things like width=50%, the max-width radio button, etc… I mean, I understand what width=50% does… It’s more of WHEN to use it. I’m trying to teach myself it via the visual editor and watching the resulting code that is generated. Oddly enough, often I understand the CODE more than the visual editor buttons/menus.

[schpengle]

@ladlon

Oddly enough, often I understand the CODE more than the visual editor buttons/menus.

sorry for delay, was trying (and failing) to order a coach ticket for the past few hours (and watching the film, BFG with her daughter) … and so the delay.

yes, I know that bit you said, i can relate to it. , but I must admit that was my lack of persistence with the the Pinegrow Interface docs. Ive gone back to them and…thinks make a bit more sense now!

[ladlon]

No worries! That’s the beauty of a forum with email alerts! Everyone can just chill, and wait for the emails…

I previously hand-coded everything, using an old HTML editor (HTMLKit). Pinegrow was my update to something more current, that would still allow me to ‘get under the hood’, but would also assist me when needed, doing some of the features/coding that I was unfamiliar with. I’m really impressed with Pinegrow, and very happy I ended up buying it. It’s been seriously solid for me so far, and the whole syncronized code/preview/visual editor thing is brilliant for learning and ‘what ifs’.

Yep, I’ve been going through the docs and looking up other tutorials and sites, as there always seems to be some bit that I somehow missed or wasn’t aware of. Just today, I FINALLY found something that explained the use of the whole max-width, mx-auto, etc… The major changes between Bootstrap 3 to 4 didn’t help much either, making so many tutorials (and what I learned from them) obsolete and incorrect. I’d be confused why certain tags/features I was trying (right after watching a tutorial on them, and gaining an understanding) wouldn’t work!

Then, there’s browswer compatibility… ugh.

Ya, I’m actually suprised and impressed how well things are working here… it’s just that darn vertical stacking thing on the iTouch and Nexus7! Otherwise, it’s working really solidly on everything else …and even when I do make a mistake, and the site gets skewed, it’s quite easy (and fun) to sort it out in Pinegrow. To me, that’s one good sign of a powerful and useful tool… when you can take a rats nest of a mess of code, and easily sort though it and repair it.

So, I’m still hoping to figure out what the deal is with the stacking issue. I’ve got two sites I built in Pinegrow, sort of waiting for that to be sorted out. Can’t find any real mention of a similar issue online anywhere… and I’ve debunked pretty much all the theories I previously had.

I did read something about a Safari bug, which initially sounded like it might be related… but after reading up on it, it doesn’t seem like it is.

I just have to figure out what things would/could cause a column to be stacked vertically, under the previous column, despite there being room to the right. Only thing I can think of that would do that would be a carriage return, the row not being wide enough (but it is in this case), or some sort of block element status… but, again, why does it work in the other devices?!

[schpengle]

well, which Nexus is it?

ie, I found this info

The new Nexus 7 seriously steps things up in the display department, boasting a stunning 7-inch, full HD display which sports an eye-popping 1920 x 1200 resolution and 323ppi pixel density - compare that to the 1280 x 800, 216ppi original Nexus 7 and you get why it's such a step up.

so what resolution is yours, and have you used/played with Media Queries to fold down the display at its critical resolutions…oh ! I jsut realises, you have posted the code, so I could have looked myself! :o
oops. oh well Ive written it now

[ladlon]

It’s a Nexus7.

I’ve even been using the Responsive Display simulation thing in the Web Developers menu of Firefox, and it works fine there, too. The Pinegrow Nexus views work as well.

Hrmm… 1920x1200?! That’s odd (and impressive)… So, why is mine acting like it’s displaying in the SM mode? (XS in portrait)

I have to check if there’s a way to set the resolution on it, or if it’s locked at 1920. I assume it would be locked, as why would you want it less?!

The mystery just got more mysterious…

Media Queries?.. Well, I do the whole col-sm-06 kind of stuff… and doesn’t that drive the @media coding under the hood, or are media queries some other thing that I’m not doing (and am supposed to be doing)?

I generally just either set the column sized by dragging the boxes in the preview, or by entering the values in the breakpoint chart in the visual editor… I don’t know if the @media coding thing is the same thing, or a totally different animal.

Yep, have a look at the code! It’s pretty standard and simple… I’m not (intentionally) straying from what they are showing in all the tutorials and docs.

What I’ll need to do, is code in some sort of indicators for each breakpoint, so I can properly see what mode the Nexus is displaying at. I can’t judge it by the layout (as I normally should) since it is just vertically stacking it, regardless of what mode it’s in.

Okay, I guess I’m doing another test page…

UPDATE: Okay, according to my test, the Nexus is showing the test page in SM mode in portrait, and MD mode in landscape… In MD mode, it should be 4 boxes across, and 3 across in SM mode… but both are showing a single line of vertically stacked boxes along the left… as usual.

COMPLETELY UNRELATED UPDATE: Neat, I just taught myself about browser prefixes.

[schpengle]

hi, in the head, you are linking to a css style sheet too,

link href=“style.css” rel="stylesheet"

is that used/contains any styles?