make the text have margins on both sides
I know I can just make margin left/right, but then I cant add a max margin so if the page is expanded more than a certain amount, the text tops expanding
how would I go about doing that?
4 Replies
dont use margin alone, use a max-width with margin-inline: auto
Big-brain move: don't use
max-width
. Instead, use width
with a min()
function!
This will have the container centered and the width will be the smaller of 60ch (the ideal line length for text) or 100% less 1.5em margin on each side. In either case, the margin declaration will center the container horizontally (equal margin on both sides).
Feel free to adjust the 3em
to your liking, but don't unduly expand the 60ch
much (you can go as big as 75ch
or so, but 60 is the recommended for text-heavy containers as the human eye can lose its place if it has to scan a long way back to the beginning of the line).yep, wanted to suggest that too, but kept it simple 😉
That's why I said "bring-brain move" since it's not the simplest 😜