In Helix Ulimate 2.0 there's five device options for the grid.
Larger Phone is missing form SP Page builder when switching to preview.
The only options I have are:
How do I enable Larger Phone Protrait and Landscape?
The regular Phone preview looks terrible and is not representative of the majority of current devices in use.
Hi Brad,
In Helix Ultimate 2.0.13 we used Bootstrap 5 grid
So "Phone Landscape" is sort of "Tablet" view. And here is evidence why I think so
(screenshot from browser Code Inspector - Responsive mode emulator - iPhone horizontal view)
The regular Phone preview looks terrible and is not representative of the majority of current devices in use.
What statistics are you relying on, please give the source. Remember that Mobile World doesn't start and end on one country only. Indeed every each year, people change phones to new model, sometimes "bigger".
If you are thinking that developers of Bootstrap are wrong - write to them directly before they will not finish Bootstrap 6. Really, they respond on e-mails ;) Every voice counts.
But I agree with you on one thing for sure, we have to consider using the same names of "grid/breakpoints" in all our products (Helix & SPPB).
I highly agree, it probably one of the most important features when designing responsive websites. I can't make proper style changes easily if I can't can see a proper rendering within the right dimensions.
It would be nice to have a down arrow next to the mobile phone preview and have the ability to select from the most popular and current versions, with the option of adding your own, like in dev tools in Chrome.
Hi Paul,
When in the Helix Template Options, the Mobile Previews looks as they look on my phone. ✅
When editing the page in SP Page Builder, the previews are too narrow and improperly rendered. ❌
Helix Settings
SP Page Builder Mobile
Chrome Dev Tools(Renders properly too.)
Regarding the Grid Break Points, do I have to set that for everything section of the layout? Nothing is set currently for any layout position. Is there a site wide setting?
Ok, thanks, now I see.
Indeed in Helix Ultimate Mobile preview we used width: 480px, which is averaged value.
I will ask for review that topic in SPPB 5.0.
That would be great and if you can find out if there's a temporary hack I can enable on SPPB to expand the preview to 480px, would save me a lot of grief until 5.0 rolls out.
That's why I added that request to SPPB 5 list-to-do
Thanks again.
In general dealing with mobile devices is madness, so many resolutions, screen sizes ;/
even iPhone produced normal (classic) size, bigger and Max (size).
I guess there is no perfect solution, only compromises
I completely agree, that's why I try to use vector images and rem dimensions for everything.
Also, I look at screen device reports and will drop concern for devices with less than 15% of traffic.
I just found the KING of Mobile Simuilators in the Chrome Store and it is amazing.
Maybe this is the solution for now.
Paul,
I figured out how to resize the iframe preview for different devices for SPPB.
/components/com_sppagebuilder/assets/css/editor.css
Change
#sp-pagebuilder-view.builder-iframe-mobile{width:320px!important}To
#sp-pagebuilder-view.builder-iframe-mobile{width:400px!important}Clear the cache, refresh, and now it renders at a proper width that is actually useable and realistic to the layout on modern phones.
Also, I found an even better free tool Responsive Viewer. It allows you to set up as many concurrent device displays for popular models, or even allows to add your own custom size device. Works for phones, tablets and desktop/laptops.
If the dev team could take integrate some of Reponse Viewer functionality into SPPB, that would really enhance and make SPPB even more awesome.
The whole purpose of using SPPB is for saving time and making great web designs. We need to be able to achieve pixel and layout perfection across all these devices. Please ask them to consider this as a top priority.
I will, and I added your idea-request to our bug-wish list already, last week.