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
MarkBoots
MarkBootsā€¢17mo ago
dont use margin alone, use a max-width with margin-inline: auto
13eck
13eckā€¢17mo ago
Big-brain move: don't use max-width. Instead, use width with a min() function!
.container-to-be-constrained {
width: min(60ch, 100% - 3em);
margin-inline: auto;
}
.container-to-be-constrained {
width: min(60ch, 100% - 3em);
margin-inline: auto;
}
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).
MarkBoots
MarkBootsā€¢17mo ago
yep, wanted to suggest that too, but kept it simple šŸ˜‰
13eck
13eckā€¢17mo ago
That's why I said "bring-brain move" since it's not the simplest šŸ˜œ