Centering the River

Hello. I am enjoying this modification I made to my wiki to allow for a river of centered fixed-width tiddlers. This style rule only becomes apparent when the sidebar is minimized. It helps me focus on the content without the content taking over the whole screen.

.tc-tiddler-frame {
max-width: 600px;
margin: auto;
}


3 Likes

The background image is amazing!

1 Like

Here’s another variation on your CSS:

.tc-tiddler-frame {
min-width: 600px;
max-width: 50vw;
margin: auto;
}

By using 50vw it allows the tiddlers to be responsive to the current window width while still maintaining the aesthetic feel of a centralized story column.

-e

3 Likes

Addendum:

Using margin:auto; will affect tiddler top and bottom margins in addition to the left and right margins. Instead, use margin-left:auto; margin-right:auto;. This will result in the same horizontal centering of the tiddlers within the StoryRiver, but avoids changing any top/bottom margins that provides vertical spacing between tiddlers.

Thus:

.tc-tiddler-frame {
min-width: 600px;
max-width: 50vw;
margin-left: auto;
margin-right: auto;
}

-e

2 Likes

This is the solution by Eric as Jennifer explained (works only with closed sidebar) for those like to give a try.

download centering-tiddler_style_whne_sidebar_closed.json (349 Bytes)

drag and drop to https://tiddlywiki.com

close/open sidebar to see the effect

2 Likes

Instructing the font size to resize along with the width of the tiddler will preserve relative line-lengths and support readability.

font-size: clamp(1rem, 1vw, 1.5rem);

Cf. clamp() - CSS: Cascading Style Sheets | MDN

This style doesn’t seem to fit the sidebar breakpoint well, due to this width limitation