Open Job Positions

Build a page for Desktop Tablet and Mobile

Back to Videos

Steps

In order to do that, you just need to be sure that you uncheck `Synced Size/Position` and then arrange the shapes in order to look good on tablet/mobile. You can enable synced size/position again after editing if you want to synchronize it again with other breakpoints.

1. Add any element
Result: Only for desktop you can move and resize this element because synce size/position disabled by default for desktop. For other breakpoints synced/size position is enabled and it is not possible to move or resize elements there
2. Move and resize this element in desktop breakpoint
Result: All actions in desktop are reflected in mobile and tablet since synced size/position is enabled
3. Go to tablet and disable synced size/position
4. Try to move and resize element
Result: It is possible to move and resize element in tablet now
5. Go to desktop
Result: Size and position of the element is no changed and remains the same as it was in desktop before step 4
6. Move and resize element
7. Go to tablet
Result: Size and position of the element is no changed and remains the same as it was in tablet after step 4
8. Move and resize element
9. Go to mobile
Result: Synced size/position is still enabled for the element in mobile. Size and position of the element is synchronized with last actions in other breakpoint. So since last change was in tablet(step 8) - size and position in mobile should be synchronized with tablet
10. Go to desktop
11. Move and resize element
12. Go to mobile
Result: Synced size/position is still enabled for the element in mobile. Size and position of the element is synchronized with last actions in other breakpoint. So since last change was in desktop(step 11) - size and position in mobile should be synchronized with desktop
13. Disable synced size/position for mobile
14. Try to move and resize element
Result: It is possible to move and resize element in mobile now
15. Check desktop and tablet
Result: Since synced size and position disabled everywhere then actions in mobile should not reflect in dektop and tablet
16. Enable synced size/position for desktop and tablet
17. Go to mobile
18. Move and resize element
Result: All actions in mobile are reflected in desktop and tablet since synced size/position is enabled
19. Disable synced size/position in all breakpoints
20. Move element to another section in any brakpoint
21. Check other breakpoints
Result: Element is moved to tanother section in all breakpoints. It works because element hierarchy should always be the same in all breakpoints even if sunced/size position is disabled. So if synced size/position is disabled in all breakpoints and in any breakpoint element is moved out of section or out of another shape or moved into another shape - it should be moved in all other breakpoints as well
22. Delete element
Result: Element is deleted in all breakpoints even if synced size/position is disabled everywhere

Hints

1. By default all element have synced size position in all breakpoints except desktop. So if you want individual designs for each breakpoint be sure that synced size/position
2. Take care about element hierarchy. If in some breakpoint you moved child element out of parent it will be moved out in all breakpoints and will be displaced
3. Sometimes need to hide elements for some breakpoints while for another breakpoints they should be visible