Skip to content

Christopher James Willcock

Enjoy Kaizen

Dads’ Breakfast: Commit 998df0135f

From the Making of Dads’ Breakfast

HTTPS://CJWILLCOCK.CA/DADS-BREAKFAST-MAKING-OF/

You are welcome to view this commit via github, sourcehut, or author’s original.

I use two (2) flatscreen LCD monitors at my writing desk. Both monitors are 1080p and leave me some room around the default block widths in the Gutenberg editor. These have a maximum width of 31.77% of my viewing area. I’m looking for nearer to half as a minimum return on my monitor-dollar.

I preserve some negative space around the tableau but impose a little bit more room for tables and various things, by applying the following CSS to the editor:

@media (min-width: 1280px){
	.wp-block{
		max-width: 800px;
	}
}

@media (min-width: 1600px){
	.wp-block{
		max-width: 960px;
	}
}

With this change, on any screen with two-thirds (2/3) the horizontal resolution of a monitor like one of mine the block widths increase from 47.66% to five-eights (5/8) of the viewport width. At screens five-sixths (5/6) mine the block widths increase from the 41.69% of the viewport width imposed by the previous media query -up from 38.125% at default WP size- to three-fifths (3/5) of the viewport width.

The ratio of viewport width to block width changes as the viewport width increases. I’m keeping the tableau on desktop to a comfortable one-half (1/2) of a 1920 pixels wide viewport. YMMV.

Leave a Reply

Your email address will not be published. Required fields are marked *