Hi Julia,

Yes - this can be frustrating, I agree and have lost work myself like this. However with a little bit of practice, these teething problems are relatively simple to overcome.

Here’s my top 5 tips for using the mobile version of the editor once you have your desktop version complete.

1. 
   

   Firstly, click a section on the page, followed by the button called ‘Page Section’ in the Layout Assistant panel, top right. This will auto move all the elements into that section. It may not get the layout right, but the elements will be sized better and on the actual page. This is the best starting point. Feel free to move the elements around in that section of the page, but not outside. 

   
   


2. 
   

   You should always change the size of text elements by using the ‘Scale’ option that will appear in the Geometry  panel. Using this tip will effectively avoid any text issues that might occur. 

   
   


3. 
   

   Turn off ‘Sections’ in the menu on the left, if they arn’t critical to mobile viewers. Not every section on landing pages is that interesting to mobile visitors. 

   
   


4. 
   

   If you notice a small alert message appear above the Desktop / Mobile button in the bottom right of the editor, then you know that you’ve made a change which has effected the Desktop version (while on the mobile version). Click Undo or visit the desktop version to see what’s changed at this point, rather than continuing to edit. You can then fix the issue on both pages, with a bit of tweaking.

   
   


5. 
   

   Last, but not least, when you are creating your Desktop version of the landing page, it helps to keep in mind that mobile pages normally have a very simple layout. Keep your desktop landing page layout simple to ensure the mobile version isn’t a nightmare to re-create!

   
   

You might also want to check out this link to the official Unbounce documentation on the mobile editor.

Hope that’s helpful! 🙂

Cheers,

Dan

Or create the mobile version first and build the desktop version up from that.

And one more tip!

Holding down control when moving/resizing elements in a particular view will stop the changes being made to the other view as well. This little trick has saved my sanity… Ctrl is your friend 🙂

That’s awesome, thanks Stuart!

Julia,

Just to clarify… Unbounce does not make responsive landing pages. There is one break point at 320px. You will find on tablets and non-desktop most pages look fine and work perfectly. This is because if you are doing landing pages correctly you aren’t packing them full of functionality and navigation. 

This was my biggest hang up when deciding on using a landing page service or having our dev team build pages. Stuart’s tip about using the control button is the single best tip you can have when building landing pages!

I would not recommend S Milar’s suggestion. Build the best version of the page you want then hide and remove things from mobile after you use the page layout tool.

Good Luck!

Joe

Yes! Probably the most important tip. It’s become an involuntary action to me to hold down the control key when working in mobile. It will keep all elements on the “other side” in tact.  Also important to note, you must use the “command” key on Mac 🙂