Many Webal Blocks modules can run from one edge of the screen to the other: a coloured band, a call to action, a row of cards or a contact strip. They all use the same Width settings, so once you know them you know them everywhere. This page explains them for the person building the page.
What it does, in plain words
Normally a module is as wide as the place it sits in: the main column, a sidebar, or the page's own container in the top and bottom rows. Full width makes the module's box run from the left edge of the screen to the right edge, whatever the place is. If the module has a background colour or picture (see the Background settings), that colour or picture reaches both edges too.
By default the words, pictures and buttons inside a full width block stay in the normal page width, centred. You can let them run to the edges as well.
Nothing is needed on the page for this: no code, no custom CSS, no extra script. It works with JavaScript switched off.
The settings
Open the module's Layout tab. The Width group has two settings. The group's heading is Width.
| Setting | Choices | What it does |
|---|---|---|
| Width of the block | Container (as the page) (default) or Full width, edge to edge | Container keeps the block as wide as its place, exactly as before. Full width runs the block's box from edge to edge. |
| Width of the content | Container (centred) (default) or Full width | Only shown when the block is set to Full width. Container keeps the words, pictures and buttons inside the normal page width, centred, while any background runs edge to edge. Full lets them run to the edges of the screen too. |
The Width of the content setting is hidden until you choose Full width for the block.
The Joomla field descriptions say the same in plain words. For the cleanest result, set the module's Module Style (on the Advanced tab) to None: that stops Joomla from wrapping the module in a box of its own.
Where it works in Cassiopeia
Cassiopeia's page has a grid of positions. Webal Blocks uses the same grid, so the results are as follows.
| Position | What a full width block does |
|---|---|
| top-a, top-b, bottom-a, bottom-b | Spans the full width of the grid, edge to edge. Two modules in one of these positions each get a row of their own when one of them is full width. |
| main-top and main-bottom | Runs out of the centred column to both edges of the screen. |
| The component column (the article or page content) | Runs to both edges only when the page has no sidebar, because the column is centred only then. |
| footer | Spans the full width of the page, edge to edge, and meets the page above it and the bottom of the page: Webal Blocks takes away the template's own 40 pixel padding above and below the footer, so no light strip shows over or under the band. Only the side where the full width block is the first or the last module of the position is closed; a module above or below it keeps the template's spacing. A block set to Container keeps the padding. |
| A sidebar | Not supported. A block beside a sidebar is not centred on the screen, so the edge-to-edge effect would be shifted. Use Container there. |
A module in the same position that keeps Container stays at the usual width, centred, so one position can hold both kinds of block.
Full width and a background colour
With a Background group set (colour, gradient or picture), the band itself runs edge to edge and the words stay inside the container width (when Content width is Container). A band with Content width Full has its words at the edges too, so pick Full only when the text reads well across a wide screen.
Right to left
The layout uses logical edges, so a right-to-left page (Arabic, Hebrew) gets the same geometry, with the spacing mirrored.
Scrollbars
The edge-to-edge box is a little wider than the page, and a classic scrollbar takes up space at the side. While such a block is on the page, Webal Blocks clips sideways overflow (it clips, it does not hide), so the page does not scroll sideways, the page does not jump, and sticky headers keep working. Pages with no full width block are not affected.
Accessibility
- The content stays in the normal reading order. Going full width changes only the box, not the order of the words or the tab order.
- The contained content keeps the same left and right inset as the template's own column, so the words do not run into the screen edge on a small phone, even when the band does.
- Text on a coloured band is checked against WCAG 2.2 AA when the Background group is used (see the Background page). A band you set to full width still has to read well at the edges.
- Zoom at 200 and 400 percent does not create sideways scrolling in the tested layouts.
Limits
- Sidebars. A block beside a sidebar, or in any place that is not centred on the screen, is shifted. Use Container there.
- Your own padding. If you set a left and right padding in the Spacing group, that padding replaces the container padding of a contained block.
- Older browsers. A browser without the
:has()selector (for example Firefox before version 121) keeps the block at its normal width. Nothing breaks. In thefooterposition such a browser also keeps the template's padding, so the light strip of about 40 pixels shows above and below the band. - Other themes. Only Cassiopeia (and its child theme) is measured. A theme with a different column can set its own inset.
Examples
- A coloured call to action across the top of the page. Position top-a, Width of the block: Full width, edge to edge. Width of the content: Container. Background: a dark colour. The band fills the screen and the text stays in the page's column.
- A full width photo strip with text on the picture. Position main-top, Width of the block: Full width, edge to edge. Width of the content: Full width. The picture and the words both run to the edges.
- A contact row near the foot of the page. Position bottom-b, Width of the block: Full width, edge to edge. The row spans the page with the words in the page's column.
Padding of blocks with their own background
A block that has a Background colour, picture or gradient, or a Light or Dark colour scheme, keeps its words and buttons off the edge by the padding you set once for the whole site, in Options > Layout: Side padding, Top and bottom padding and Side padding on phones (screens under 576 pixels). The defaults are 1.5 rem (24 pixels) and, on phones, 1 rem (16 pixels). A block on the plain page background is not changed.
- Your own padding wins. A Padding top, bottom or left and right in a block's Spacing group replaces the site value on that side, and sits inside the coloured area. The Background group's own Padding replaces it above and below.
- Full width blocks. When the content stays in the container, the container gives the sides and only the top and bottom come from the Options.
- Older browsers. A block with both a colour scheme and a Background shows its padding twice in a browser without
:has()(Firefox before version 121). Nothing breaks. - Upgrading. Before this setting a Light or Dark block had a fixed 16 pixels above and below and 20 pixels at the sides, and a Background band had none. Now both follow the Options: 24 pixels at the defaults, 16 pixels at the sides on phones. The scale has no 20 pixel step, so for a look close to the old scheme padding set the three Options to 3 (1 rem); set them to 0 to take the padding away.