You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -92,7 +88,6 @@ Phoenix Code provides various options in the Live Preview toolbar.
92
88
93
89
-**Edit Mode***(Pro)*: Edit elements directly in the preview-change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/edit-mode-live-preview).
@@ -102,45 +97,38 @@ Phoenix Code provides various options in the Live Preview toolbar.
102
97
Clicking the button switches to **Preview Mode**. On **Phoenix Pro Edition**, a second click returns to **Edit Mode**. On **Phoenix Community Edition**, a second click switches to **Highlight Mode**.
103
98
You can also use the keyboard shortcut `F8` to toggle Preview Mode.
***Pop Out to New Window** — Opens Live Preview in your default browser. This is helpful when you want to see how your page looks in a full browser window.
***Browser Icons** — Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default. You need to hover over the toolbar to reveal them.
***Live Preview Settings** — Located at the right-most side of the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings).
135
125
136
-
---
137
126
138
127
<!-- Add an image here showing the Device Size Presets button in the toolbar -->
139
128
140
129
***Device Size Presets** — A device icon button at the right side of the toolbar. Click it to see a list of common device widths (phones, tablets, and desktops). Pick a device to resize the Live Preview panel to that width. The button icon changes to match the current width category.
141
130
On **Phoenix Pro Edition**, the dropdown also shows CSS breakpoints picked up from your page's stylesheets. See [Resize Ruler](../../Pro%20Features/resize-ruler) for details.
142
131
143
-
---
144
132
145
133
## Using Live Preview with HTML Files
146
134
@@ -150,7 +138,6 @@ Phoenix Code provides various options in the Live Preview toolbar.
150
138
151
139
> If changes don't appear, reload Live Preview and wait until the bolt icon turns full yellow.
0 commit comments