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.
Change 486 to whatever you want your max width to be.
You might have to do an additional style for container-fluid
Thank you. Will put both into a separate css file and give it a go. Will report back.
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.
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.
May need to re-order a couple of elements, but we’ll wrestle it into shape.
Appreciate your input and prompt responses.