All Collections
Landing Page
Creating/Editing Your Landing Page
How to optimize your landing page and emails for different screen sizes
How to optimize your landing page and emails for different screen sizes

Want your landing page and emails to look different on mobile vs. desktop view? Here's how to do that.

Shelby Baldwin avatar
Written by Shelby Baldwin
Updated over a week ago

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

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

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 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 support@buzzbassador.com.

Did this answer your question?