kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): stop content-layout width:100% from covering the sidebar

Browse Source 
Zibll dual-column relies on margin carving out .content-layout while width
stays auto. Under border-box, width:100% + margin-right kept the border-box
at full container width so .sidebar (margin-left:-311px) sat under the main
column. Drop the forced 100% width, pin layout 2/3 gutters and sidebar
negative margins to Zibll's 311px (+ CSS var fallback).
This commit is contained in:
kate522
2026-07-24 09:48:43 +08:00
parent 6bc5a1d910
commit 6ce6ce44e4
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/layout.css
+19 -4
View File
@@ -87,8 +87,13 @@ main.content-shell::after,
clear: both;
}
/* Zibll: .content-wrap { float:left; width:100%; } — display:block restores float
* if a route stylesheet accidentally set flex/grid on the wrap. */
/* Zibll main.css 1:1 dual-column (float + negative-margin).
*
* Critical: .content-layout must NOT set width:100%. Under box-sizing:border-box
* a 100% width + margin-right gutter keeps the border-box at full container
* width, so the gutter never shrinks the content box and .sidebar (margin-left:-311px)
* sits under the main column (overlap). Zibll only sets margin on .content-layout;
* width stays auto so margin carves out the column. */
.content-wrap {
float: left;
width: 100%;
@@ -99,8 +104,10 @@ main.content-shell::after,
.content-layout {
display: block;
width: 100%;
/* width:auto — never 100%; margin must shrink the used width */
width: auto;
min-width: 0;
max-width: none;
margin-right: 0;
margin-left: 0;
box-sizing: border-box;
@@ -114,6 +121,7 @@ main.content-shell::after,
/* Base sidebar column (Zibll .sidebar defaults) — layout variants override below */
.sidebar {
float: left;
width: 311px; /* Zibll hard 311px; --sidebar-width kept in sync via runtime vars */
width: var(--sidebar-width, 311px);
min-width: 0;
position: relative;
@@ -144,17 +152,21 @@ body.site-layout-1 .content-layout--no-sidebar,
margin-right: 0 !important;
}
/* Sidebar RIGHT (layout 2) — Zibll uses hard 311px; runtime --sidebar-width must match */
/* Sidebar RIGHT (layout 2) — Zibll: margin-right: calc(311px + 15px) only */
body.site-layout-2 .content-layout,
.site-layout-2 .content-layout {
margin-right: calc(311px + 15px);
margin-right: calc(var(--sidebar-width, 311px) + 15px);
margin-left: 0;
width: auto;
}
body.site-layout-2 .sidebar,
.site-layout-2 .sidebar {
float: left;
width: 311px;
width: var(--sidebar-width, 311px);
margin-left: -311px;
margin-left: calc(0px - var(--sidebar-width, 311px));
position: unset;
}
@@ -162,13 +174,16 @@ body.site-layout-2 .sidebar,
/* Sidebar LEFT (layout 3) */
body.site-layout-3 .content-layout,
.site-layout-3 .content-layout {
margin-left: calc(311px + 15px);
margin-left: calc(var(--sidebar-width, 311px) + 15px);
margin-right: unset;
width: auto;
}
body.site-layout-3 .sidebar,
.site-layout-3 .sidebar {
float: left;
width: 311px;
width: var(--sidebar-width, 311px);
margin-left: -100%;
position: unset;