Analysis of the issue with the right-side blocks in the portal
Based on the observed behavior, the extension appears to be generating the structure correctly. Since the same portal works properly on other templates, including paid ones, the issue is probably not in the extension itself.
The most likely cause is that, in the specific environment of
demo.caforum.fr, some content, CSS rule, or width configuration is causing the central column to take up too much space. When this happens, the right-side column no longer fits beside it and is pushed downward.
Possible causes
1. Wide content inside the central column
Some content may be forcing the main area to become wider than expected, such as:
- Image without a width limit
- Wide table
- Iframe
- Code inside or
- Very long link
- Technical text without line breaks
This can make the central column grow beyond the expected width and push the right-side column downward.
Recommended CSS:
Código: Selecionar todos
.portal-center,
.portal-center *,
.portal-main,
.portal-main * {
max-width: 100%;
box-sizing: border-box;
}
.portal-center img,
.portal-center iframe,
.portal-center video,
.portal-center table {
max-width: 100%;
height: auto;
}
.portal-center pre,
.portal-center code,
.portal-center .content {
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
2. Missing if the layout uses flex[/b]
If the portal layout uses
, the central column needs:
Without this, the browser may prevent the central column from shrinking correctly, especially when there is wide content inside it.
Suggested fix for a flex layout:
Código: Selecionar todos
.portal-wrapper,
.portal-container,
.portal-columns {
display: flex;
align-items: flex-start;
gap: 12px;
}
.portal-center {
flex: 1 1 auto;
min-width: 0;
}
.portal-right {
flex: 0 0 240px;
max-width: 240px;
}
3. The style CSS may be interfering with the portal
Even if the extension works correctly on other templates, this specific style may have a rule overriding the expected behavior.
It is worth checking in DevTools whether any rule is affecting classes such as:
Código: Selecionar todos
.portal-right
.portal-column-right
.portal-center
.portal-column-center
.portal-container
.portal-wrapper
.rightside
.sidebar
.panel
.column
.content
Sometimes a generic theme class, such as
,
, or
, ends up interfering with the portal blocks.
4. The total column width may be larger than the container
It is also important to check whether the real sum of the columns exceeds 100%.
Problematic example:
Código: Selecionar todos
Left column + central column + right column + gap + padding + border > 100%
Even if it looks visually correct, values such as:
can exceed the total available width and cause the right-side column to drop below.
A safer configuration would be to use a fixed width for the right-side column:
or:
Conclusion
The extension appears to be outputting the correct structure. The issue is probably related to the CSS or to specific content in the environment where the right-side column is dropping down.
The most robust fix would be:
- Add to the central column.
- Limit images, iframes, videos, and tables with .
- Force wrapping on , , long links, and long text.
- Check whether the style CSS is overriding the portal classes.
- Confirm that the total width of columns, gaps, and paddings does not exceed the container.