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
Solutions
Composable Checkout
B2C Buy Now Pay Later
B2B Buy Now Pay Later
Consumer Finance
Embedded Lending
Embedded Payments
Pay by Bank
Point of Sale
Pay by Link
Pay by QR
Sustainability
Plugins
Shopify
Shopware 5, 6 & Cloud
Magento 1 & 2
Commercetools
WooCommerce
Prestashop
Plentymarkets
OXID
JTL 4 & 5
xt:Commerce
Opencart
Oro Commerce
CCV Shop
Dan Domain
Smartstore
Industries
PSPs & Gateways
E-Commerce Platforms
Point of Sale Systems
SaaS Providers
Banks
Insurers
Fintechs
Contacts
Message
Ads
Site
Shop
Connect
Products
Value Added Services
Settings
Connect
Transactions
Point of Sale
Checkout
Checkout Solutions
Products
Checkout Solutions
Conversational Commerce
Social Commerce
No Code Builder
AI powered PIM
Value Added Services
Sustainability
Pay by QR
Pay by Link
Point of Sale
Pay by Bank
Embedded Payments
Embedded Lending
B2B Buy Now Pay Later
B2C Buy Now Pay Later
Composable Checkout
Solutions
Consumer Financing
Pay by Link
Smartstore
Dan Domain
CCV Shop
Oro Commerce
API
Opencart
xt:Commerce
JTL 4 & 5
OXID
Plentymarkets
Prestashop
Point of Sale
WooCommerce
Commercetools
Magento 1 & 2
Shopware 5, 6 & Cloud
Shopify
Plugins
Connections
© payever. All rights reserved.
English (United Kingdom)