This article will explain how the layout of your website can be adapted to be responsive on mobile. This is also known as Responsive Design (optimized for mobile devices).
We will cover the following points:
- The responsive design
- Enabling the responsive design
- Layout in desktop version
- Layout in mobile version
The responsive design
The Responsive Design automatically adjusts the display of a web page to the screen size of the device you are using (smartphone, tablet, desktop, etc.).
It is a question of adapting the site to all resolutions. In other words, the blocks of content (text and images) are resized and reorganized according to the space available on the screen.
Enabling the responsive design
1. Create a customized page
Go to Website > Menus and pages > New Page, select Customized and then click Save.
2. Text block
Once on the page has been created, click on the 3 dots next to the page name and select Edit page.
Next, drag a Text block into the checkerboard. The text block can be found on the sidebar under Add a block.
3. Add Content
You are now able to add text and customize this block to your liking.
4. Add an Image
In the same block, click on the Image option in the editing panel.
Next, click on Upload > Choose File.
Click OK and you will then be automatically directed to Image Info where you can readjust the height, width, and other elements of the image. Press OK to save your adjustments.
Do not use the image option from the menu on the left because images added with this option are centered responsively, but not resized.
Layout in desktop version
Layout in mobile version