Customise content for different end devices
Your website should look good and be optimally usable on every device – from large desktop monitors to small smartphone screens. Our editor supports you by automatically adapting the content you create for the desktop view to tablets and mobile phones. However, to ensure the best possible display and user-friendliness on all devices, this article shows you how to individually adjust the view and specific content. This way, you ensure that your message is clear and appealing everywhere.
We will explain the procedure to you using a concrete example. On the desktop, you have chosen the following layout for your heading, for example:
On the mobile phone, this results in the following view:
After editing for the desktop, we recommend reviewing the views on the other two devices. In our example, two key points stand out:
The lower image is smaller/narrower than the upper image.
Two identical images on a mobile phone might not achieve the desired effect as on a desktop.
To display all content and images in full size, the width of the columns on mobile devices must sometimes be adjusted manually. To do this, move your mouse over the column until a wide, purple bar appears on the far right side. Click this bar, hold the mouse button, and drag the column width to full screen width.
Attention: On mobile devices, you can only adjust the width of the columns, i.e., the outer shape. As soon as you adjust content (like the image itself or the text) at this point, these changes will also affect the desktop/tablet view accordingly.
In our example, however, we now only want to remove the lower image on the mobile phone so that end-users can view the website more comfortably on their mobile device. For this adjustment, we return to the desktop view. We move the mouse over the column where the image is located. We click on the three dots and select the menu item "Show on device". There, we remove the checkmark next to "Show on mobile":
The column will now be hidden on the mobile phone but will remain visible on the desktop and tablet. You can hide modules, columns, and rows on different devices in this way.
This method also allows you to design entire content sections for just one device and hide them on all other devices. However, we only recommend this option in truly sensible situations, as you would otherwise have to maintain three websites individually.
Keywords: Webdesign, Mobile Optimization, Tablet View, Mobile View, Mobile Website, Editor Customization, Adjust Column Width, Hide Content, Device-Specific Content, Edit Website, Display Adjustment, Mobile Display, User Experience, Design Adjustment, Content per Device
We will explain the procedure to you using a concrete example. On the desktop, you have chosen the following layout for your heading, for example:
On the mobile phone, this results in the following view:
After editing for the desktop, we recommend reviewing the views on the other two devices. In our example, two key points stand out:
The lower image is smaller/narrower than the upper image.
Two identical images on a mobile phone might not achieve the desired effect as on a desktop.
Adjusting Column Widths on Tablet and Mobile Phone
To display all content and images in full size, the width of the columns on mobile devices must sometimes be adjusted manually. To do this, move your mouse over the column until a wide, purple bar appears on the far right side. Click this bar, hold the mouse button, and drag the column width to full screen width.
Attention: On mobile devices, you can only adjust the width of the columns, i.e., the outer shape. As soon as you adjust content (like the image itself or the text) at this point, these changes will also affect the desktop/tablet view accordingly.
Inserting Different Content on Various Devices
In our example, however, we now only want to remove the lower image on the mobile phone so that end-users can view the website more comfortably on their mobile device. For this adjustment, we return to the desktop view. We move the mouse over the column where the image is located. We click on the three dots and select the menu item "Show on device". There, we remove the checkmark next to "Show on mobile":
The column will now be hidden on the mobile phone but will remain visible on the desktop and tablet. You can hide modules, columns, and rows on different devices in this way.
This method also allows you to design entire content sections for just one device and hide them on all other devices. However, we only recommend this option in truly sensible situations, as you would otherwise have to maintain three websites individually.
Keywords: Webdesign, Mobile Optimization, Tablet View, Mobile View, Mobile Website, Editor Customization, Adjust Column Width, Hide Content, Device-Specific Content, Edit Website, Display Adjustment, Mobile Display, User Experience, Design Adjustment, Content per Device
Updated on: 18/06/2025
Thank you!