I defined mosts stacks as flexible to ensure good responsively.
I am about to optimize the use of breakpoints.
But I do not know beginning which pixel size tablet or mobile breakpoint
is used. Where Can I find the definitions of these breakpoints?
First off I’d stop think of things as mobile, tablet and desktop. The latest iPads use a Mac user agent, and some are as large as a small laptop. Some folks phones are as big as other tablets.
That can vary from theme to theme (or framework to framework) and stack to stack.
For example, the RapidWeaver 8 themes that come with RW Artful, Climate, Enginer, Future and Mountains are all based on Bootstrap 4. Also all the ThemeFlood themes use Bootstrap 4 breakpoints:
| Size | Breakpoint |
|---|---|
| Small | min-width:576px |
| Medium | min-width:768px |
| Large | min-width:992px |
| Extra Large | min-width:1200px |
Now the standard breakpoints for the stacks that come with stacksand the point at where the "Hide This Stack happen are as follows:
| Size | Breakpoint |
|---|---|
| Mobile | max-width: 440px |
| Tablet | (max-width: 770px) and (min-width: 441px) |
| Desktop | min-width: 771px |
And Frameworks and 3rd party stacks can vary.
3 Likes
Thank you. That was what I wanted to know.
If you want to to take your responsive design a little bit further, then have a look at the Agent Stack from Weaver Space.
Unlike the responsive settings in Stacks, who still delivers the complete page to the device (e.g. the desktop content is still completely send to a mobile browser, even if it’s not displayed), the stack only sends the content you selected.
Also it doesn’t use break points, but the device identification (Browser Agent String), this makes a difference especially with mobile phones (iPhone 7,8,X Plus, Pixel Plus …) over smaller tablets: they have similar resolutions, but usually more a desktop like site behavior. The Stack can do many more tricks, like detecting device OS, robots / search engines, url params … Very powerful.
1 Like
Thank you. Will look at the stack.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.