Three device buttons change the editor canvas width. They help uncover overly narrow text, awkwardly wrapped columns, and elements that should be hidden on smaller screens.
What you will learn
- Switch between three control canvas widths.
- Distinguish previews by device type.
- Check template position widths and visibility according to device type.
- Perform the same visual check in each mode.
What each button sets
| Mode | Canvas Width | What to focus on |
|---|---|---|
| Desktop | available editor width | overall composition, wide rows, and multi-column layouts |
| Tablet | 768 px | transitional layout, text line lengths, and navigation menu |
| Mobile | 575 px | column stacking, content order, and touch-readable elements |
The device button does not create another version of the template. It switches the editor to the corresponding viewport and reapplies the grid's responsive rules. Upon switching, the canvas scrolls back to the top and an open mobile menu closes so that the new preview begins in a predictable state.
Step-by-step review
- Start on Desktop and scroll through the page from header to footer. Verify that no section feels cramped or empty.
- Switch to Tablet. Check whether columns fit properly, headings don't wrap awkwardly, and the menu doesn't take up excessive space.
- Switch to Mobile. Verify the logical order of blocks, image widths, text readability, and visibility of primary calls to action.
- In Grid, select a problematic position and adjust its width or visibility for the current breakpoint range. Responsive settings are properties of the position, not the module inside it.
- After making changes, review all three modes again. Fixing mobile layout can affect inheritance or stacking at wider viewports.
- Finally, use clean Preview mode so editing handles don't distort your impression.
Grid and appearance are checked differently
In the Grid inspector, each position (column) has visibility settings and Bootstrap widths for mobile, tablet, and desktop. The numeric width control becomes accessible only for the device breakpoint you are currently viewing, and only for rows containing two or more positions. This lets you immediately see the impact of your changes on the canvas.
Standard values in the right appearance inspector can be toggled as well. If an element doesn't fit on mobile, first determine whether the issue stems from the grid width of the entire position or the shared appearance of the element inside.
Therefore, actually review all three viewports after every major modification. Custom responsive CSS should only be added in the safely restricted CSS editor or global CSS, and is suitable only for users who understand media queries; for general layout adjustments, use Grid by default.
Preview is not a benchmark for specific mobile hardware
Modes use fixed control widths and run inside your browser. They do not test every device model, operating system, or live Joomla page behavior. Perform checks on your target website prior to deployment.