Note: We use "Program" and "Member" as label-agnostic terms to refer to any marketing you are using Buzzbassador to facilitate, whether you refer to it as an affiliate program, influencer marketing, ambassador program, referral program, creator partnerships, brand reps, partner program, etc.

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. ⬇️

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.

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!

Now, duplicate the element by clicking the small, blue "Duplicate" icon on the outside of the element.

Now that you have a duplicate of the element, make sure the second one is hidden on the desktop version so that your members 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.

Navigate to the mobile version by clicking the "Mobile" tab at the top of the right-side editing panel.

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.

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.

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 members 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].