In Editor X, I have the 3 default breakpoints for viewports:
For a start, afaik those breakpoints are not good enough. Generally one should design for different breakpoints:
This, according to a design guideline I use, is a bit more work, but for me has a better usability.
320-640 - Mobile
641-1024 - Tablet
1025-1920 - normal PC/Laptop
1920 - big screen.
Happy to be corrected!
Then, have you properly used docking?
When I get such problems, for example, it’s often a Text within a stack not docked within the stack .
The breakpoints just provide boundaries at which the browser will choose a different set of your specifications. Your specifications must still make sense within the entire range of that breakpoint. From what you’re describing, that’s not the case.
I’d suggest looking at the elements that are misbehaving and then checking things like their height and width, their docking, and so on. Do that for the element itself, but also look at any parent elements, including the section.
One approach is to lay out your elements for the small end of the breakpoint and then see how your design behaves as you stretch the viewport. Don’t just hop from breakpoint to breakpoint, but instead stretch the viewport slowly so you can see where things break and then figure out why.
Great illustration, Pratham.
Thanks @tillgebel I will check the docking.
Thanks @pratham this is exactly my issue.
But which width do I have to lay out my elements in a range? For example in your video, in your range 1680-1001, elements are overlapping when stretching to 1001. So how did you resolve this issue? Did you lay out your elements on 1001 width and then they all fit when stretching to 1680? Did you create a breaking point between the range?
@manu Without knowing the specifics of your layout, it’s hard to say what exactly is causing the problem you are having. However, it’s important to look at the way you’ve defined each element (and its parent) to see how it will behave over the full range of your breakpoint. That includes things like docking, container size, grids, and so on.
I’ll give you just one, very simplistic example. Here’s a layout similar to the one @pratham used in his example. You’ll note that the elements look fine at 1200 viewport width, but they overlap at 1100. In this case, I defined the width of each element in pixels and docked them to the closest edge.
Then, in the second example, I simply redefined the width of each element in percentages instead of pixels. Everything else remained the same. Now it works at 1100 (and at 1200, too). There’s no overlap.
I’m NOT saying that’s your problem or your solution. I’m just giving you one example of how the definition of an element affects how it behaves at different viewport widths.
I’d suggest – if you’re not already doing it – that you use grids as an assist to your layouts. And again, look carefully at how you’ve defined each element to ensure that your definition is applicable to the entire range of the breakpoint. And don’t forget to look at parents. Their definition can also affect how a child element behaves.
