Using the Responsive Viewport Tools
Modern websites must look great on all devices, from desktops to tablets and smartphones. SiteJet and most website builders provide responsive viewport tools to help you preview and adjust your site for different screen sizes.
Step 1: Launch the SiteJet Editor
- Log in to your Jiinubi Client Area.
- Navigate to Services → My Services and select the hosting service linked to your SiteJet website.
- Click Launch SiteJet to open the editor.
Step 2: Access the Responsive Viewport Tools
- Within the SiteJet editor, locate the Viewport/Device Preview icon on the top toolbar.
- Click the icon to open the responsive preview panel.
- Choose the device type you want to preview: Desktop, Tablet, or Mobile.
Tip:
Use the responsive preview before publishing to ensure your website looks perfect on all devices.
Use the responsive preview before publishing to ensure your website looks perfect on all devices.
Step 3: Adjust Layouts for Different Devices
- Switch between Desktop, Tablet, and Mobile views using the viewport tools.
- Adjust text sizes, images, and element spacing to fit smaller screens.
- Check that buttons, menus, and forms remain functional on all devices.
Notice:
Changes made in responsive view affect only the current device layout, not other views, allowing device-specific customization.
Changes made in responsive view affect only the current device layout, not other views, allowing device-specific customization.
Step 4: Preview and Test
- Use the Preview button to see your website in real-time across all devices.
- Test interactive elements like menus, buttons, and forms to ensure proper functionality.
- Make adjustments as needed before publishing.
Warning:
Always preview your website on actual devices in addition to the viewport tools. Some layout issues may not appear in the editor preview.
Always preview your website on actual devices in addition to the viewport tools. Some layout issues may not appear in the editor preview.
Best Practices
- Start your design in desktop view, then refine for tablet and mobile.
- Keep text readable and buttons easily clickable on small screens.
- Use responsive images to reduce load times on mobile devices.
- Check alignment and spacing consistently across devices.
Tip:
Consistent testing in responsive view helps avoid user frustration and improves overall user experience.
Consistent testing in responsive view helps avoid user frustration and improves overall user experience.
Summary
Summary:
Responsive viewport tools in SiteJet allow you to preview and customize your website for desktop, tablet, and mobile devices. Always preview, test, and adjust layouts before publishing for a seamless experience across all devices.
Responsive viewport tools in SiteJet allow you to preview and customize your website for desktop, tablet, and mobile devices. Always preview, test, and adjust layouts before publishing for a seamless experience across all devices.
For further assistance, contact Jiinubi Support.
