One of the most praised qualities of our platform is the fact that every piece of content you create is responsive out-of-the-box. However, our view modes still allow you to fine-tune your publication across different screen sizes.

To give you an indication of the importance of responsiveness, we see that on average 50% of visitors view publications on a desktop device, 38% on mobile devices, and the remaining 12% on tablet devices. A noteworthy trend is that the percentage of desktop visitors decreases every year, whilst mobile keeps increasing. On top of that, we’ve registered over 15,000(!) different screen sizes that were used to view publications.

In this article, we’ll talk about how you can use the view modes to fine-tune your publications for different screen sizes.

In this article

  • Where to find the view modes
  • The desktop, tablet, and mobile view
  • How changes affect other views
  • Fullscreen preview
  • Hiding the navigation
  • Hiding margins and paddings

Where to find the view modes

In the editor, you’ll find the view modes in the center of the top bar:

This is where you fine-tune your publication for different screen sizes (desktop, tablet, and mobile), determine what you see inside the editor, and access the preview.

The desktop, tablet, and mobile view

When creating publications, we advise to regularly check the different view modes to see how your publication is shaping up across different screen sizes. Keep in mind that these view modes serve as an indication of what your publication will look like on desktop, tablet, and mobile devices. What visitors of your publications see will still vary based on their screen size.

It’s important to know that most changes you make in the different view modes cascade down. This means all changes on desktop also affect the tablet and mobile view. As an exception, making changes to text or adding new blocks, columns, or elements does affect all screen sizes.

All other changes on tablet also affect the mobile view, but don’t affect the desktop view. In a similar way, all other changes on mobile only affect the mobile view (so not the desktop or tablet view).

It’s also important that realize that the theme also listens to the view modes. So, if you make changes there they will also cascade down.

Desktop
The desktop view displays your publication as it will be seen on desktop devices.

Keep in mind that what visitors see will still vary based on their screen size. Remember that all changes you make here cascade down to the tablet and mobile view.

Tablet
The tablet view displays your publication as it will be seen on the average tablet device (in portrait mode). This view serves as an indication of what your publication will look like on tablet devices, what visitors see will still vary based on their screen size. Tablets in landscape mode will see the desktop view.

When you switch to the tablet view, you’ll notice that your editing capabilities have been limited. However, you can still make changes to content, the theme, the order of blocks and columns, margins and paddings, background images and even hide certain blocks, columns, and elements from this view size.

Remember that most of these changes will also affect the mobile view, but will not affect the desktop view. As an exception, making changes to text or adding new blocks, columns, or elements also affects the desktop view.

You can reorder blocks and columns by clicking on the grab icon and dragging them to the desired place. You can also choose to hide certain blocks, columns, or elements entirely from this view.

It’s also possible to change the background image of a block. This enables you to display a different background image that might be more suited for smaller screen sizes.

Mobile
The mobile view displays your publication as it will be seen on the average mobile device (in portrait mode). This view serves as an indication of what your publication will look like on mobile devices, what visitors see will still vary based on their screen size.

When it comes to making changes, the same logic applies as for editing the tablet view.

How changes affect other views

It’s important to know that most changes you make in the different view modes cascade down. This means all changes on desktop also affect the tablet and mobile view. As an exception, making changes to text or adding new blocks, columns, or elements does affect all screen sizes.

All other changes on tablet also affect the mobile view, but don’t affect the desktop view. In a similar way, all other changes on mobile only affect the mobile view (so not the desktop or tablet view).

It’s also important that realize that the theme also listens to the view modes. So, if you make changes there they will also cascade down.

Fullscreen preview

The view modes menu also allows you to access a Fullscreen Preview of your publication.

Preview your publication to see what it looks like outside our editor. If you’ve already published your publication, the preview also allows you to preview your changes before setting them live by republishing your publication.

The preview URL is freely shareable and can be accessed by anyone, even if they don’t have an Foleon account.

Note: the preview of your publication can’t be found through search engines and is only accessible to those that have the URL.

We advise to always check and test the preview of a publication before publishing it.

Hiding the navigation

The navigation is really helpful for readers to navigate through a publication, but in the editor it can sometimes get in your way. The view modes menu includes a toggle to show or hide the navigation bar in the editor, this won’t affect the actual publication itself.

Hiding margins and paddings

Next to being able to align content through the settings of a block, column, or element, the editor also includes tools to tweak the design of your publication with margins and paddings.

The view modes menu includes a toggle to show or hide margins and paddings. If you’re not tweaking the design of your publication with margins and paddings you can switch them off for a distraction free editing experience.

Did this answer your question?