WIDTH CSS Help...

[FrizzleFried]

I am using css to limit the width of a container (is that the right word?)'s width.  I have it set as follows:

.preview
{
font-size: x-small;
align-items: flex-start;
display: flex;
gap: 1em;
width: 60%;
}

Which does the job.  Unfortunately,  when I reduce the size of the browser it maintains that 60% width all the way to mobile size.  The behavior I am seeking is for the container to remain the same width until the edge of the "container containing the container" (say that 10x fast) ... IE: the side of the theme gets close THEN it too starts to reduce in size.

Is that doable via CSS by chance?

[FrizzleFried]

Well I figured that out.  Use xxx px; versus a percentage!

Ex: width: 800px;

EDIT: Damn...nope.  That then creates a SCROLL BAR when reducing the size of the browser window rather than reduce the size of the container in question once it hits the hard-coded size.  >argh!<

What to try next....hmmm....

[Arantor]

Well, I'd probably do it as width: 100%; max-width: 800px; as this way you get it to behave with a maximum upper size and it doesn't go weird on mobile sizes that don't have 800px width.

[FrizzleFried]

Ah HA!  Margin-Right: xxxpx; does the trick!!

Or not...trying Arantors suggestion.  Thank you.

[FrizzleFried]

...and needless to say.  Arantor's suggestion worked perfectly.

Thank you sir.

[Arantor]

Any time

It helps that writing this kind of thing is literally my day job