A layout that looks great on a large monitor needs different proportions on a phone. The editor allows you to set the width and visibility of positions for individual screen sizes.
What you will learn
- Set different position widths for mobile, tablet, and desktop.
- Allow columns to stack on smaller screens.
- Hide a less important position without deleting its configuration.
- Verify the result across three preview modes.
One position, multiple widths
Responsive means that the layout adapts to the device width. For example, a position can have a width of 4 out of 12 on desktop, 6 out of 12 on tablet, and 12 out of 12 on mobile. Thus, three cards stand side by side on a widescreen, stack in pairs on a tablet, and each takes up a full row on a phone.
The width value is always a number from 1 to 12. The number does not indicate pixels, but a fraction of the 12-column Bootstrap grid. The setting is saved to the template and converted into corresponding responsive classes upon export.
Step-by-step setup
- In Grid mode, select the row whose columns you want to edit and open the Grid inspector for that row.
- In the list of its positions, start with the desktop width and divide the row based on the importance of individual parts.
- Switch the preview to tablet and choose wider columns if the content already feels cramped.
- On mobile, set standard content blocks to a width of 12 so they stack vertically.
- You can hide a less important position for the selected size. Afterwards, verify that the page still makes sense without it.
Hiding is not deleting
Visibility controls whether a position is displayed at a given size. A hidden position remains in the configuration, and its modules are not deleted. This is useful, for example, for a wide informational block that would clutter a mobile screen. At the same time, do not hide primary navigation or the sole path to contact information.
Visibility by size is different from assigning a module strictly to the homepage. The former responds to screen width, whereas the latter responds to the type of page currently being displayed.
Before hiding anything, review the full contents of that position. Hiding it will conceal all of its modules at that specific width, not just the single element causing distraction. If a position contains both a decorative image and a key contact button, it is better to separate the elements or adjust their layout. The Grid inspector belongs to the selected row and manages its columns; simply clicking a position does not open a standalone panel with these responsive values by itself.
Verify every change with a genuinely long sample title, not just a short placeholder.
The preview is a reference tool
Tablet mode uses a width of 768 px and mobile mode uses 575 px. The editor safely simulates the layout, but does not display live Joomla content. A long actual product title or menu item may require more space than the sample text.