Mar 13, 2026 4:24 pm
Hello,
I'm having trouble with the forum layout on my WordPress site using the Brikk theme.
I'm having trouble with the forum layout on my WordPress site using the Brikk theme.
- Desktop: I want a fixed width of 955px for
#wpforo-wrap. However, the sidebar keeps pushing down to the bottom, and the left content column is being cut off. - Mobile: The stats columns (Topics/Posts) disappear in portrait mode and only show up when rotating to landscape. I've tried forcing
display: blockortable-cellvia CSS but they remain hidden.
I am currently using this CSS to try to fix it, but it's not working as expected:
/* 1. EL CONTENEDOR MAESTRO (955px y centrado) */
#wpforo #wpforo-wrap {
width: 955px !important;
max-width: 95% !important;
margin: 0 auto !important;
display: block !important;
overflow: visible !important;
}
/* 2. COLUMNA IZQUIERDA (Aumentamos al 74% para dar más aire) */
#wpforo #wpforo-wrap .wpforo-content {
width: 74% !important;
float: left !important;
padding-right: 15px !important;
box-sizing: border-box !important;
min-width: 0 !important; /* Permite que se encoja */
}
/* 3. COLUMNA DERECHA (Sidebar más estrecha para ayudar) */
#wpforo #wpforo-wrap .wpforo-right-sidebar {
width: 25% !important;
float: right !important;
box-sizing: border-box !important;
}
/* 4. LO QUE HACÍA QUE FUNCIONARA (Tablas elásticas) */
#wpforo .wpf-cat-list,
#wpforo .wpf-thread-list,
#wpforo table {
table-layout: fixed !important; /* OBLIGA a la tabla a no salirse */
width: 100% !important;
min-width: 0 !important;
}
/* 5. EVITAR EL "EMPUJE" HORIZONTAL (Salto de línea forzado) */
#wpforo #wpforo-wrap .wpforo-content * {
white-space: normal !important; /* Permite que "Respuestas" se corte si no cabe */
overflow-wrap: break-word !important;
word-break: break-all !important; /* Esto es lo que hacía que pusiera Res-puestas */
}
/* 6. LIMPIEZA PARA QUE EL PADRE NO SE CORTE POR ABAJO */
#wpforo #wpforo-wrap:after {
content: "";
display: table;
clear: both;
}
/* --- AJUSTE PARA MÓVILES Y TABLETS --- */
@media (max-width: 955px) {
/* 1. El contenedor principal deja de tener ancho fijo y se vuelve elástico */
#wpforo #wpforo-wrap {
width: 100% !important;
max-width: 100% !important;
padding: 10px !important;
display: block !important;
}
/* 2. La columna izquierda ocupa todo el ancho y deja de flotar */
#wpforo #wpforo-wrap .wpforo-content {
width: 100% !important;
float: none !important;
display: block !important;
padding-right: 0 !important;
margin-bottom: 30px !important; /* Espacio antes de la sidebar */
}
/* 3. La sidebar ocupa todo el ancho y se pone debajo */
#wpforo #wpforo-wrap .wpforo-right-sidebar {
width: 100% !important;
float: none !important;
display: block !important;
clear: both !important;
}
/* 4. Ajuste extra para que las tablas internas no se corten en pantallas pequeñas */
#wpforo .wpf-thread-list,
#wpforo .wpf-cat-list,
#wpforo table {
table-layout: auto !important; /* Permite que el navegador ajuste las columnas según el espacio móvil */
}
}
/* 1. FORZAR QUE LAS TABLAS NO MIDAN MÁS QUE EL MÓVIL */
#wpforo .wpf-cat-list,
#wpforo .wpf-thread-list,
#wpforo table {
table-layout: fixed !important; /* OBLIGATORIO: las columnas se adaptan al ancho del móvil */
width: 100% !important;
min-width: 0 !important; /* Elimina anchos mínimos de wpForo */
}
/* 2. AJUSTE DE COLUMNAS INTERNAS EN MÓVIL */
/* Reducimos las estadísticas al mínimo para dar espacio al título */
#wpforo .wpf-cat-stat-posts,
#wpforo .wpf-cat-stat-topics {
width: 45px !important;
font-size: 10px !important;
padding: 2px !important;
}
/* 3. EVITAR QUE EL TEXTO "EMPUJE" LA TABLA HACIA LA DERECHA */
#wpforo .wpf-cat-title,
#wpforo .wpf-thread-title,
#wpforo .wpf-cat-last-post-title {
white-space: normal !important; /* Salto de línea para que no se corte */
word-wrap: break-word !important;
word-break: break-all !important; /* Rompe la palabra si es necesario (ej: Res-puestas) */
display: block !important;
max-width: 100% !important;
}
The issue specifically started as soon as I activated the wpForo Sidebar Widget. Without the sidebar, the layout was fine, but with it active, the left column gets cut off and the sidebar drops, even with custom CSS. It seems like the theme's container is too narrow for wpForo's two-column structure.
Important detail about Page Templates:
My theme (Brikk) only offers "Default Template" and "Elementor" templates. Since I'm not using Elementor for this page, I'm stuck with the "Default Template", which seems to have a restricted container width. This is likely causing the sidebar to drop and the stats columns to be hidden by wpForo's responsive engine because the available space is too small.
My theme (Brikk) only offers "Default Template" and "Elementor" templates. Since I'm not using Elementor for this page, I'm stuck with the "Default Template", which seems to have a restricted container width. This is likely causing the sidebar to drop and the stats columns to be hidden by wpForo's responsive engine because the available space is too small.
Since my theme (Brikk) has a very narrow default container and no "Full Width" template, wpForo's internal responsive engine seems to trigger the "hide columns" rule too early.
Could you please help me identify which container or internal wpForo setting is forcing these widths and hiding the stats columns on mobile? Maybe providing the specific Hook, Filter, or Function to lower the CSS/JS breakpoint where wpForo decides to hide these columns? I need to force them to remain visible even on narrower screens
Thanks!!!
3 Replies
Mar 14, 2026 9:32 am
Here is the CSS code we recommend checking:
#wpforo #wpforo-wrap {
width: 100% !important;
max-width: 100% !important;
padding: 0;
}
.brk-row {
max-width: 95%
}
.cat-stat-posts, cat-title{
font-size: 11px !important;
}
Here you can customize each value as you like.
