Adding a mobile layout to your projects

When sharing your Infogram content online, your viewers might look at it on various devices, including mobile phones. However, some of your projects might not be the best size for a mobile screen. No worries! You can now create two different layouts for the same project so that everyone can enjoy your content on their preferred device.

Switching to the mobile layout

While you're creating your project in the Infogram editor, you can switch views between the desktop layout and the mobile layout.

  1. Click on Layout at the bottom left corner of the editor.
  2. In Layout settings, click Add mobile layout.
  3. To switch between layouts, select Desktop or Mobile in Layout settings or use the keyboard shortcut ⌘ + L (Mac) or Ctrl + L (Windows).

If you'd like to remove the mobile layout from your project, select Mobile in Layout settings, and click Remove mobile layout.

Add_mobile_layout.gif

Adjusting the mobile layout

When you've selected the mobile layout, you can start adjusting it to fit mobile devices. You can change the size of the project, move the objects around, and resize them to your liking. As you do this, the desktop layout will remain unchanged.

 
Keep in mind: If you delete something in either of the layouts, it will disappear from the other layout as well.

Adjusting_the_content.gif

 
Pro tip: When adjusting your content in the mobile layout, the auto-align feature can come in really handy. Check out the tutorial article on auto-aligning your projects and see how you can change the structure of your entire project with one click. 

Locating objects that are outside of the canvas

As you're arranging the desktop layout of your project, some of the objects might get placed outside of the canvas of the mobile layout. In order not to lose them, make all objects visible with one click.

  1. Click on Layout at the bottom left corner of the editor.
  2. Toggle on Show overflow. You can also make all objects visible by tapping O on your keyboard.

show-overflow__1_.png

Previewing how the mobile layout looks like

Before sharing your content with others, you can preview how each of the layouts will be displayed.

  1. Click on Share... at the top right corner of the editor.
  2. Switch between the two layouts in the Preview dropdown.

When shared online or embedded on your website, the project will automatically switch the layout to match the size of your viewer's screen. To read more on the available project sharing options, visit the Share section of our dedicated knowledge base.