Customizing Your Layout for Different Screens
This article will guide you through customizing your layout for mobile and tablet screens, ensuring your site looks good and works well on all platforms.
- Open the Devices Preview overlay by clicking on the device icon on the top bar
- Switch to the mobile screen option using the device screen selector.
Please note: the layout from the desktop view is scaled down to fit inside the mobile screen. In many cases, this outcome is not desired. Instead you may want to readjust the layout by resizing and repositioning the widgets in the layout. You may also want to make complex customizations to completely change the mobile experience.
How to adjust the device view?
- Open the Devices Preview overlay by clicking on the device icon on the top bar
- Switch the toggle on the right of the tablet icon
- Customize your layout.
How to adjust the Tablet view?
- Click on the downward arrow at the bottom of the Devices Preview overlay to view all available devices.
There are two options for the tablet view:
- Tablet Landscape
- Tablet Portrait.
You can switch the toggle on the right of the tablet icon to customize your layout.
By default, the Tablet Landscape view inherits from the desktop, and the Tablet Portrait view inherits from the phone. However, you can switch the Portrait view to inherit from the desktop:
- Click on the leftward arrow on the left from the Tablet Portrait icon.
- Switch the Inherit from desktop toggle.
Once you have made the desired adjustments you'll want to proof the page in the emulator. To do this, simply click the Preview button at the bottom right corner of the screen.
Make sure to disable your browser's popup blocker before proceeding.
