Before we start creating layout variants we are going to check if our layout design elements react well to different screen sizes. We are using the same steps as described in https://support.sitemanager.io/hc/en-us/articles/115003957049-General-Styling
Go to the design editor (placeholder render or page render) and select the paintbrush style icon for the component you want to change.
In this example we are going to double check the font-size of the website title in the menu.
There are 4 viewports: laptop (default), large desktops, tablets and mobile icons.
Large Desktop view
Click the desktop icon in the style panel property.
Click the tablet icon in the style panel property. (portrait mode)
Laptop view (standard)
Click the laptop icon in the style panel property. (same as landscape tablet)
Click the mobile icon in the style panel property.
In this example the font-size for mobile is smaller then other screen sizes.