360Crafter experiences are viewed on a wide range of devices and screen sizes. Responsive design lets you control how your hotspot callouts look and behave at different viewport widths, so your experience looks great whether someone is viewing it on a large desktop screen, a tablet, or a phone.

![](https://support.360creators.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--37db10494c659a21705f6ef5b2304017fd4356ef/image.png)

---

## **Breakpoints**

360Crafter uses three breakpoints:

| **Breakpoint** | **When it applies**                    |
| -------------- | -------------------------------------- |
| Base           | All screen sizes (your default design) |
| Tablet         | Screens 1079px wide and below          |
| Mobile         | Screens 767px wide and below           |

The Base breakpoint is your starting point. It defines how everything looks by default. Tablet and Mobile breakpoints let you adjust that design for smaller screens.

---

## **How the Cascade Works**

The three breakpoints follow a cascade from largest to smallest:

* Everything starts from **Base**.

* Adjustments you make at **Tablet** automatically apply to Mobile as well.

* Adjustments you make at **Mobile** apply only to Mobile.

This means you only need to make changes at a breakpoint when something needs to look different from the breakpoint above it.

---

## **Switching Breakpoints in the Editor**

The breakpoint selector appears in the Properties Panel when you have a hotspot or skin component selected. Switching breakpoints resizes the canvas to match that breakpoint’s width and switches the editor into that breakpoint’s context so any changes you make are saved for that breakpoint only.

You can also drag the edge of the canvas to resize it freely. The editor automatically detects which breakpoint you are in based on the canvas width.

---

## **Working with Breakpoints**

1. Design everything in **Base** first until you are happy with the desktop layout.

2. Switch to **Tablet** and adjust for medium-sized screens. These changes cascade to Mobile automatically.

3. Switch to **Mobile** and make any additional adjustments needed for small screens.

4. Switch back to **Base** to continue refining the overall design.

When a property has been customized at the active breakpoint, it is highlighted in the panel so you can see at a glance what differs from the base design.