Re: layout.css
at
[d8-root]/my_zen_sub/components/asset-builds/css/layout.css
(true also for Zen 8.x-7.x-dev ~2016-Jul-14)

Window width of 916 px to 1181 px

With a browser window width
of 916 px through 1181 px,
for which the page is rendered as one-column,
the 'div.layout-center' has sufficiently small
left and right margins/padding/white-space
at the sides of the window to satisfy me,
using...

/* Line 237 */
.layout-center {
padding-left: 12px;
padding-right: 13px;
}

Window width of 915 or less

As the window width is reduced
from 916 px to 915 px,
the rendered page 'jumps' (as though from a spasm),
increasing the left- and right-side padding
to 20px, using...

/* Line 230 */
.layout-center {
padding-left: 20px;
padding-right: 20px;
}

Stopping the Convulsions: My CSS Hacks

The following changes in my 'layout.css' file
have resolved the 'jumping' issue for me,
but I wonder if my changes
can be expected to cause other problems
which I have not yet experienced,
and that I am oblivious to
given my lack of technical understanding
of the CSS layout method used in Zen.
(or, for that matter, any other responsive CSS layout method : o )

---

/* Line 1 */
.layout-3col {
margin-left: -12px; /* Was -20px */
margin-right: -12px; /* Was -20px */
}

/* Line 19 */
.layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar, .layout-3col__col-1, .layout-3col__col-2, .layout-3col__col-3, .layout-3col__col-4, .layout-3col__col-x {
padding-left: 12px; /* Was 20px */
padding-right: 12px; /* Was 20px */
}

/* Line 230 */
.layout-center {
padding-left: 12px; /* Was 20px */
padding-right: 12px; /* Was 20px */
}

Comments

Christopher James Francis Rodgers’s picture

Issue summary: View changes
eleleka’s picture

Assigned: Unassigned » eleleka
JohnAlbin’s picture

Version: 8.x-7.0-alpha14 » 8.x-7.x-dev
eleleka’s picture

Assigned: eleleka » Unassigned