Ok, I’ve been trying to figure out what preview devices match up the Blocs preview and the simple answer is they don’t.
In my Blocs preview the Landscape iPad doesn’t match the Blocs preview at all. And the actual Landscape iPad layout doesn’t seem to exist in my Blocs preview breakpoints.
Can anyone explain which breakpoints match what specific device layout. IE: XS=iphone, SM=iPad Landscape, MD=iPad Portrait.
I have a breakpoint I can’t edit because it doesn’t exist in Blocs.
This needs to be addressed real soon! I can not move forward with a project until I can actually edit the breakpoints properly.
None of the breakpoints in Blocs are device specific. They are width specific, consider that a web browser can now be used on an iPad in multiple window sizes / widths.
Also modern tablets have various screen sizes.
You can tweak the interface based on device OS using custom interactions but this is not using breakpoints.
I can see your frustration, but I wouldn’t take the previews too literally to specific models of devices and see them more as a guide. Bootstrap dictates the breakpoints and works to those breakpoints it’s not Blocs that that sets the breakpoints if you see what I mean. This always used to be the case with Foundry in Stacks, there were previews for devices, but they had to be taken with a pinch of salt and used only as guides. I used to find with Foundry and do now with Blocs that a website created and previewed in a device mode would look like different on the same device model by two different users. I have my own personal iPad and I have my work iPad and at times I get different expected results on both of them. My work iPad has Chrome, Edge and Safari on it and my home one has Safari, Firefox and Chrome, throw these in the mix with different settings on iPads and you then get different permutations occuring with browser versions, individual iPad settings etc. It’s the same with mobile, I have an adroid phone and displays my mobile versions differently to my iPhone friends. Many of these devices live on the cusp of breakpoints and also with regular updates to browsers etc can display content differently.
Although not related to breakpoints, I’ve got a similar issue at the moment in concept that I’m wrangling with regarding animated SVGs. Every device, desktop, tablet, mobile and breakpoint size for these displays exactly what I expect to see except for my work iPad with Safari browser only that displays what I don’t expect to see. Any other browser on my work iPad displays correctly.
I know it’s not helpful, but I would say just use the device previews as a guide and just consider breakpoints only, so that you know what is happening exactly at a specific breakpoint instead. Mobiles and tablets keep uping their game with resolution that end up breaking out of the ‘traditional’ screen resolution for device type, browsers keep updating on weekly basis that affects how they deal with content, there are too many permutations to ensure an exact and faithful reproduction for a specific device.
Although not specifically related to your issue, but similar in concept, my SVG issue at the moment with iPad Safari is driving me nuts, iPad Safari is doing things differently to every device and browser at the moment. I know I can do workarounds and then find in an iPad or Safri update in a couple of months it changes again how it deals with content.
Just use previews as a guide, stick to breakpoints as the law, even the mighty Chrome web developer previews will often display different to the actual physical device.
The iPad screen size in Blocs preview is 1024x768 pixels. If your iPad browser window is bigger or smaller than this, then you will see different results.
I see the problem, there is a typo in the measurements in the breakpoint dropdown in the Blocs interface. The MD breakpoint would target the iPad 768px wide screen, not the SM one this should be 767px > 576px.
This is the measurements that should be in that dropdown control.
I have this fixed up and ready for next weeks release.
Apologies for the confusion. This one had me scratching my head until i went back to the Bootstrap framework which Blocs uses and studied the breakpoint levels.
So if you want to show the mobile navigation on the iPad you would set the navigation option to the medium breakpoint like this.
Also regarding exporting screen shots, I just noticed that needs a tweak as well when generating them from the design canvas. It always generates the desktop view.
As far as I can see there is a small issue around the 768px break point. The visibility button for the small “768” breakpoint have no effect in the demo. The box should be seen on “small” screens. But as you see in this demo (attached) it’s not.
The demo shows with JS the actual viewports are correct and it shows the expected breakpoint each screen is operating in.
Edit: I “think” it’s behaving as expected in terms of Bootstrap breakpoints.
Medium is 768 and up.
I “think” what’s catching people out (including myself) is there are no preview screens available that fall in the range of a bootstrap small breakpoint as far as I can see.
Sorry but the problem is the Bloc 6 is not rendering the breakpoints as they appear on actual devices. Blocs 6 preview is different then what renders on the actual device.
Doing samples like yours doesn’t demonstrate the rendering issues.
For example: 1140px doesn’t render properly on a landscape iPad. MD doesn’t render properly on a portrait iPad.
I did not have any issues with the website when it was done in Blocs 5. Converting it to Blocs 6 didn’t work. I’ve even rebuilt the entire site in Blocs 6… same issues.
I rebuilt in in Blocs 5 and there are no issues with the rendering.
As I mentioned in my support ticket responses and for anyone else who may encounter this, just adapt the iPad viewport width in preview mode by a few pixels up and you will see the MD breakpoint.
From all of my testing across various setups I’m still not able to get the SM breakpoint to load on the MD width size of the iPad portrait viewport.
But I shall keep digging.
We have various improvements coming to the new preview mode in 6.1, so hopefully a proper solution is not far off.
.