Hi, I have an issue where my website using Site Origin doesn’t collapse columns when on high-resolution mobile devices like my IPad Air Gen 3 (1668×2224 portrait resolution).
In order to get it to collapse on my ipad, I have to set the “Mobile Width” in the settings something greater than 1668px.
This is not ideal since low-resolution desktop monitors would then see the mobile view.
Is there any way to make Site Origin use something other than pixels to determine when to collapse?
Like using em, aspect ratios or
-webkit-device-pixel-ratio:3for triggering the mobile view?
I think this should be a feature in Site Origin if it isn’t already.
Especially since Site Origin’s default mobile view width (768px) would result in a website looking different on tablets with the same physical screen size but varying resolutions.
Hi, thanks for reaching out.
Have you perhaps tried enabling the Use Tablet Layout option at SettingsPage BuilderLayout?
You’d probably also want to then adjust the Tablet Width setting. Does that help at all? Unfortunately, at the moment, there isn’t an aspect ratio option.
Thank you for your reply. :)
After some more research, it seems I don’t need the “Mobile Width” setting to be more than 1668px to achieve the mobile view after all.
Instead of the ipad’s screen resolution’s width, I actually needed 834px which is the viewport resolution of my iPad (as determined by its device pixel ratio).
Enabling the tablet view didn’t solve the issue in my case.
I believe it’s because my website’s rows all have 3 columns and I wanted it to collapse to 1 column on both tablets and phones.
All I needed was to increase the mobile width to 1024px and High-resolution tablets are now seeing the site the way I wish.
Long story short, the issue is resolved. But while I’m here, I would like to suggest adding the ability to choose how columns collapse on different screen sizes.
It would help in cases where you want to force a specific number of columns to collapse or stay uncollapsed. Thanks for considering!
Super, I’m glad to hear you’ve made progress. Thanks for your detailed feedback.