Mobile Layout Assistance

Tools and settings to help you layout your mobile design quickly

Kylen Downs avatar
Written by Kylen Downs
Updated over a week ago

Starting your website design on desktop is a great place to build out your brand and look. However, there may come a point where you realize you may have forgotten about designing the mobile version and when you go to take a look, you may see something like this:

Layout Mobile


The good news is that you don't have to manually set up the design from scratch all over again. We have a tool that allows you to copy over the same settings and similar positions of the elements to reflect the desktop view. If you select the canvas and click the options menu (...) to the right of the canvas name layer, you should see an option to Layout Mobile in the drop-down menu.

Once clicked it will open up a new window that will allow you to choose a handful of options to help orient your design to help order the layout.

Note: These options are generated automatically and may not create the exact design you are looking for. However, it should help give you an easier starting point and from there you can make adjustments to optimize the design for mobile.

Layout

1). Auto: will generate a version of your site on mobile according to the mobile dimensions and layout.

2). Scaled: will create a duplicate version of the desktop version's layout *font sizes may need to be optimized for mobile viewing

3). Stacked: will center and resize all the elements on the canvas to display in order to allow easy manual placement of elements

4). Do Not Layout: does not adjust the layout of the mobile format (can be used when you want to copy only the design settings but not the layout)

Style & Settings

5). Copy Desktop Canvas: will copy all of the desktop canvas settings and apply them to the mobile canvas settings.

6). Copy Desktop Elements: will copy the element settings from desktop over to mobile.

Did this answer your question?