Constrain overall width on wide screens

Bootstrap Studio Help
1

Most apps will be view on mobile devices. However, some folks will be viewing them on their desktop monitors.
PROBLEM: the small screens explodes to full width on large monitors.
SOLUTION NEEDED: How can be constrain the display width ONLY on large screens to about 75% width or less, but keep 100% viewport width on handheld devices?

We have tried some max- and min- width css but that only affects the text displays and not a heading on the screen that includes a nav button on each side and a title in the middle. It still goes full width, even when the “body” is constrained.

Appreciate in advance for any suggestions.

2 
.container {
  max-width: 486px!important;
}

Change 486 to whatever you want your max width to be.

You might have to do an additional style for container-fluid

3

Thank you. Will put both into a separate css file and give it a go. Will report back.

4

That worked fine for one issue, but still a few more gremilins lurking within the layouts which need to be sorted to make the max-width work correctly.

One question tho: with the constrained width, how do we force it all to center-up horizontally on the monitor screen.

HERB

5

the container should center horizontaly be default, the bs css has it set to margin left/right as auto.

If you have all your child elements in the container it should’nt cause any issues.

6

Thanks. Understand.
May need to re-order a couple of elements, but we’ll wrestle it into shape.
Appreciate your input and prompt responses.

HERB

1 Like