Template:Header structure/sandbox.css

/* Styles used by header templates (not just header) */

/*
 * main block

/* The top level wrapper for the header main block. */ .wst-header-mainblock { margin: 4px auto 4px auto; padding: 0 3px; display: flex; align-items: center; }

/* Common styles for back and forward links */ .wst-header-back, .wst-header-forward { display: flex; flex: 1 4 100%; min-width: min-content; align-items: center; font-size: .9em; } .wst-header-nav-empty { visibility: hidden; }

/* The container for the back (previous) link. */ .wst-header-back { justify-content: flex-start; text-align: left; }

/* The container for the central cell. */ .wst-header-central-cell { flex: 4 1 100%; max-width: max-content; text-align: center; }

/* The container for the forward (next) link. */ .wst-header-forward { justify-content: flex-end; text-align: right; }

@media(max-width:768px) { /* Put title on its own flexbox row */ .wst-header-mainblock { flex-wrap:wrap; }	.wst-header-central-cell { flex:0 0 100%; order:-2; width:auto; }	.wst-header-back, .wst-header-forward { width:auto; } }

/*
 * notes block

/* The overall notes container. */ .wst-header-notes { display:inline-block; border-collapse:collapse; border-spacing:0; empty-cells:hide; font-size:.9em; line-height:1.4; margin:0 auto 4px auto; width:100%; }

/* Left-floated content. */ .wst-header-left { float:left; }