Hey guys. Hope this is the right category for this question :-/
So I maintain a site in RW7 / Stacks 3 called krugercliffs.com, and it’s got pages with two or three columns, even on the main page.
These 2-column or 3-column objects are checkmarked in RW7 as Stacked Columns. Meaning; when showing them using preview for iPhone they show one on top of the other. And indeed; in RW7 preview it looks perfect.
However, when the site is loaded onto the web, and I view it with my iPhone it does not show up as intended; the page is pretty much showing up as you’d view it on a regular PC. It just shows the 3 columns next to each other! So it looks as if my iPhone disregards the Stacked Columns setting!
Anyone know how to force Stacked Columns to work?
your configuration is a bit dated and maybe you need to update Stack or both software but it depends on your system. The theme is updated?
In the meantime you can try to republish the site “File/Re-Publish All Files” and check again.
Make sure also to check if you have custom CSS in the page.
Another quick update! This gets even stranger now…
When I choose to stack columns not only for iPhone but for iPad and PC as well, and then upload the site …then I get following results;
- On PC and with a regular browser the columns as stacked!
- On iPad the columns do not get stacked
- On iPhone the columns do not get stacked
So it seems that the RW code can detect when it’s on a PC, but fails to detect when it’s on iPad/iPhone
I’ve solved it (for now) by making 2-column and 3-column items only visible on iPad/PC, and adding a separate 1-column item which is only visible on smartphone, and in which I repeat all sub-items that are normally in the 2- or 3-column items. It’s all right for all static pages I guess, but for pages with dynamic content (like yearly room rates) it’s going to be a PITA to maintain.
So I’m still hoping for a solution although I have no clue what to do. I’m not keen on upgrading anything, as I only ise RW7/stacks3 for maintaining my own sites. Maybe a stack like “Responsive Layout” on Weavers.stack could help, but I tried buying it and it says “no longer available”. Maybe there’s alternatives or someone doesn’t mind sending that old Responsive Layout stack to me?
Hi @JochenVDP,
The problem here, is that the code that RW and Stacks generate, doesn’t specify which device type should display which layout (contrary to what you’d expect by looking at the names used for the settings in Stacks).
In reality, it simply tells the visitor’s browser something like “if the browser view port is less than 400 pixels wide, stack these columns. If not, display them side-by-side”. And here lies the catch: 12 years ago, no smartphone out there had screens with a horizontal width of 400, so automatic stacking just always worked.
But nowadays pretty much all smartphones have these big displays with huge horizontal pixels counts (and even bigger vertical pixel counts), so the viewport is always wider than 400 pixels.
Ona desktop machine, you can drag the width of the browser down to anything, so eventually, the columns will stack.
If you REALLY need to look at device types for layout shift, it’s best to get Weaver Space’s “Agent” stack, and set it up to only display a certain itteration of your layout when a browser identifies itself als “Mobile Safari” or “Chrome for Android” etc. More work, but total control!
Cheers,
Erwin
Thanks for your reply, Erwin.
The weird thing is that my RW code responds to “show on device type X” and “do not show on device type Y” checkmarks.
So it does detect the used device perfectly, and it does know what item to (not) display when on iPhone …EXCEPT with 2-column and 3-column items. Then for some reason it doesn’t.
I’m still thinking of getting some old stack like “Responsive Layout”, in the hopes of getting rid of this issue. But yeah… I need to find the stack I’m looking for. And the one I found is no longer available.
Hi @JochenVDP,
You should really take a look at the “Agent” stack I mentioned in my previous post - it does exactly what you need it to do, and more.