The importance of mobile devices, though already enormous it’s getting higher still. Thus, when designing your website, it’s essential that your design is responsive and stays consistent on all screen sizes. This document will help you use built-in responsive editing options on your Kepler website.

With these options, you can adjust settings throughout your website so it looks perfect on Desktop, Tablet, and Mobile.

On your Keper websites, you have two places where you can change the preview for other devices.

Responsive Settings Customizer #

Responsive settings are available in almost all Customizer options. These are the types of settings that you could use with the responsive editing capability:

• Font Size & Colors
• Border Color
• Icon Size, Color, and Spacing
• Paddings
• Margins

Step 1 – Access the Customizer. When accessing the Customizer, it will be by default set to the desktop preview;

Step 2 – Navigate to the location of the option you wish to edit;

Step 3 – Using the responsive editing icon next to the settings, circle between the desktop, tablet, and mobile preview to select the one you wish to edit. We would suggest starting from the desktop as some settings could be automatically inherited by smaller viewport sizes (for example, font or background colors);

Step 4 – Edit your settings separately for desktop, tablet, and mobile. Click “Publish” to apply the change.

As an example, we will show you how to make your Body font look different for each viewport size:

Change font size and click Publish.

Do the same for mobile.

Responsiveness for header, footer, and pages #

For the header, footer, and pages refer to this article.