Device Configuration

Sizzy offers a lot of customization for how the devices look in your workspace. This includes hiding the browser's UI and device frames, which header icons to display, and more.

To open the configuration popup, click the Device Config icon towards the right of the app header.

Document image

Device frame

Use the Frame toggle to enable or disable the device the hardware frames around devices. Or, use the Minimalistic frame toggle to only get rid of the fancy detailing on device frames.

Document image

Frame color

When in Minimalistic frame mode, you can change the color of the device frames using the buttons and the Shift Color slider in the Frame color section.

Document image

Toggle device edges

Many Samsung models have an edge glare because of the curved glass, which can be very distracting while developing and testing. To turn this off, disable the Show device edges option.

Document image

Toggle browser and OS UI

Use the Browser and OS toggle to enable or disable UI elements such as the OS notification bar and the browser's tab and address bars.

Attention Turning off the browser and OS UI this way makes the viewport take up all the available space on the device screen—the resulting viewport dimensions will thus give you an inaccurate view of how the website will look on real devices. To get around this quirk, see the Correct screen dimensions section below.
Document image

Correct screen dimensions

You can enable the Correct screen dimensions mode when both Browser and OS and Frame options are turned off.

This mode, combined with a disabled Browser and OS option, subtracts the space from the viewport that would normally be taken up by the browser and OS UI—giving you the correct viewport dimensions and aspect ratio for that device.

Document image

Change device spacing

When in Responsive Mode, you can change the amount of space between the devices using the Space between devices slider.

Document image

Per-device config overrides

If you want to override the device config for individual devices instead of universally, open the 3-dot menu on the top right of the device, and click on Configure.

Document image

Here, enable the Override Device Config option, and you'll be able to modify all the settings mentioned in this article.

Document image

Customizing the device header

By default, there is the device name and resolutions, and icons for Rotate, Refresh, Screenshot, and the 3-dot menu icon for device settings above every device. This is called the Device header.

To learn more about configuring the header, head over to the dedicated Customizing the device header article.