The Landing Pages Editor offers many options to ensure that your website is displayed perfectly on all end devices.

The components are built in such a way that they automatically break or shrink on smaller screens. Your designs are therefore automatically adapted to all devices. Nevertheless, you can access each device separately and make changes here.

Here you will find settings that always apply, such as background colors. You will also find settings here that can be overwritten later in the devices, such as spacings.

This category contains the settings for devices with the largest screens up to standard laptop screens.

Settings from this category apply to smaller laptops, screens and some large tablet screens.

These settings apply to tablets and some large cell phone screens.

All but the largest cell phone screens are affected by these settings.

When editing components, the general settings and the settings of the active device group are always displayed. To edit the settings of other device types, you must change the active device group in the top menu bar.

A common use case is the adjustment of a grid or the width of the individual grid items.

Objective: A selection of eight images should be displayed on the desktop in two rows of four images each. On tablet devices, four rows of two images each should then be displayed. In the mobile view, all eight images should be displayed one below the other with a width of 100%.

Implementation: First use a grid and place eight grid items in it. In the grid items under the setting item "Item Size", each grid item is given three columns (calculation: 12 columns in total / 4 images per grid row = 3 columns).

Um anschließend die Verteilung der Grid Items für Tablets anzupassen, wechselst du zuerst in der oberen Menüleiste zur Tablet-Ansicht und anschließend in den Komponenten-Einstellungen vom Default-Settings-Tab in den Tablet-Settings-Tab. Unter „Item Size“ bekommt jedes Grid Item nun sechs Spalten. Jedes Grid Item hat nun eine Breite von 50 %.
(Berechnung: 12 Spalten insgesamt / 2 Bilder pro Grid-Reihe = 6 Spalten).
​

Repeat the same step for the mobile devices. The "Item Size" is set to 12 columns here so that only one image is displayed in a row on mobile devices.

After all, you have an image grid that adapts depending on the device. 💪

For some components, specific adjustments must be made via the Styles Menu. The Styles Menu is located in the left sidebar.

For example, if you want to adjust the size of a small button, go to Button > Small in the Styles menu. Then select the device on which you want to make the adjustment. The button size can now be determined separately for each device under "Height" and "Horizontal Spacing".

General adjustments for components such as buttons that affect several of these components can usually be found here.

Other examples of customizations that can be made in the Style menu are

💡 With spacing, please note that a so-called modifier is set for notebook, tablet and mobile in the Styles Menu. This reduces the spacing, which is set by default, by the defined factor in each case. However, it has no influence on spacings that are set in the devices. If you do not want this to happen, you can either overwrite the spacing in the individual devices or set the modifier for the corresponding device to 1. You can find the Modifier in the Styles Menu under "Spacings".