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

© payever. All rights reserved.

English (United Kingdom)