Design layout elements

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 inhttp://knowledge.sitemanager.io/getting-started-workflow-guideline/7-check-responsive/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.

step1-5

There are 4 viewports: laptop (default), large desktops, tablets and mobile icons.

step2-8

Large Desktop view

Click the desktop icon in the style panel property.

step3-8

Tablet view

Click the tablet icon in the style panel property. (portrait mode)

step4-4

Laptop view (standard)

Click the laptop icon in the style panel property. (same as landscape tablet)

step5-4

Mobile view

Click the mobile icon in the style panel property.

step6-3

In this example the font-size for mobile is smaller then other screen sizes.