When you're editing your landing page, you may notice that some elements look too big, too small, or just different when viewing on one screen size (i.e. desktop) vs. another (i.e. mobile). Luckily there's a way to edit elements for both screen sizes! Here's how. ⬇️
How to optimize your landing page for different screen sizes
I'm going to use a button for this example. It's just the right size on my desktop screen, but a bit too big for my mobile screen.
1. Edit the element for desktop
Open the element (in my case, a button) in the desktop version. You can navigate to the desktop version by clicking the "Desktop" tab at the top of the right-side editing panel. Change the size, text size, font, color, etc. on desktop. Get it just how you like it!
2. Duplicate the element
Now, duplicate the element by clicking the small, blue "Duplicate" icon on the outside of the element.
3. Hide the new duplicate element on desktop
Now that you have a duplicate of the element, make sure the second one is hidden on the desktop version so that your ambassadors don't see two of the same thing. You can do this by scrolling to the bottom of the right-side editing panel to the section "Responsive Design", and turning on the "Hide on Desktop" switch.
4. Switch to mobile view
Navigate to the mobile version by clicking the "Mobile" tab at the top of the right-side editing panel.
5. Hide the original element on mobile
Again, you still have two elements and you only want to show one. Since you already edited the original element exactly how you want it for desktop, hide that one on mobile. Just select it, go down to the bottom of the right-side editing panel to the section "Responsive Design", and turn on the "Hide on Mobile" switch.
6. Edit the element's duplicate for mobile
Now that you only have one element showing, you can edit it exactly how you want it on mobile, and it won't affect how it looks on desktop. In the case of this example, I think this button is too big for mobile screens, so I made it smaller.
7. Preview and save
Now just use the preview button on top right menu to preview, and switch back and forth between desktop and mobile view to preview what your ambassadors will see!
This can obviously be done for other elements as well, and can also be done in the opposite order, editing first for mobile and then for desktop.
If you need any further help, please don't hesitate to send us a chat at the bottom right corner of your app screen, or email us at [email protected].