Why is my mobile version all messed up?


#1

:x: The Problem

"Help! My desktop version looks great, but when I switch over to mobile everything’s messed up. :frowning: "

“My landing page doesn’t look good on mobile - how do I fix it?”

“How do I get my mobile version to look good on iphones?”

“My Unbounce page doesn’t look good on android - the mobile view is all jumbled. Help!”


:white_check_mark: The Solution

When you initially switch over to the mobile view in your page builder, there will be a bit of setup work involved to tailor the mobile page to the smaller canvas. This will especially be the case when you add your own content to the page.

We set the “break point” for your mobile pages at 600px. This means that any browser window that loads the page while under 600px or less will see the mobile version of the page. Any desktop browser larger than 600px will see the desktop version.

After you create your desktop page, toggle over to the mobile view and look for the Layout Assistant tab. Unbounce built this handy little tool that will essentially do 90% of the heavy lifting when it comes to formatting the mobile version.

After you apply this, it’s just a matter of making small tweaks and adjustments to get things looking exactly how you need them.

:bulb: Tip: For more tips on working with Mobile Responsive, check out this handy guide.


:link: Related Resources

For a more detailed instruction on how to use Mobile Responsive, check out this Academy article. Alternatively, you can check out this workshop that walks through all of this (and much more) in a helpful video.


Mobile Responsive FAQ's