Before starting the editing process on the mobile version for any template, we have some suggestions that can help to gain a better understanding of how mobile views work in bucket.io:

• After choosing the template, browse through the three different views (desktop, tablet, phone) to familiarize yourself with how the copy, backgrounds, countdown timers, etc. will look on each device.
  
• To keep things simple, we encourage sticking to the template framework as closely as possible, and keeping changes to a minimum. This will save you a lot of time and help eliminate any major formatting issues. 
  
• When adding your images, keep in mind the resolution - sometimes you may find yourself having to use other apps or software to optimize your images before uploading them into your funnels.
  
• Views on desktop, tablet, and mobile have a domino effect - meaning that changes should be made first on the desktop view so they can carry to the mobile view and then it is just a matter of tweaking the size. Here is an article from our help center about how to find the mobile editor: Viewing Funnels on Mobile 
  

Once in the mobile view, you can start making changes using the menu controls from the left-hand side of the Builder.

When in mobile phone view

There will likely be certain sections that you will want to hide on the mobile view to make for a better user experience, but wish to maintain on the desktop view. *Important - try to keep your most important info (hook and call to action button) above the fold. Here are the steps to accomplishing this:

Step 1 - Click on / select the section that you wish to remove/hide from mobile view only

Step 2 - Click on the tools icon to display the Properties section on the left-hand panel

Step 3 - Scroll down to the Alignment section and select the drop-down menu under 

Step 4 - Select None to hide that section on mobile view  *Please note that you may have to repeat these steps in the same section to hide all components (text box, container, etc.) 

Step 5 - Click back to desktop view, and you will see that section remains, but is now hidden on mobile

Troubleshooting

Here are a few tips on how to adjust the Properties when your layout is not displaying as desired:

1. All images should be set to auto for width and height versus setting specific numbers 
   

2. If sections are not centered, check the left and right margins, and ensure that the margins are the same on both sides
   

3. Another tip for centering - under Alignment, set the position to relative, and ensure that the left and right margins are set to auto