Hi,
I am building an app that can run on mobile and web. In the web version. I want to limit its width and make it in the centre. here is what I do
.custom-mx-auto {
margin-left: auto;
margin-right: auto;
}
.custom-max-w-3xl {
max-width: 48rem/* 768px */;
}
<IonApp className='mx-auto custom-max-w-3xl'>
<IonReactRouter>
....
</IonReactRouter>
</IonApp>
however, I have an issue is that when the screen width becomes larger, the popover position is not right. This only happens when the screen width becomes in large
after investigation, it turns out that margin-left: auto; and margin-right: auto; will influence how popover determines position.
I wonder if is there a solution to keep Ionapp in the centre. and when the screen becomes smaller, it will turn into a one-column app.
–
I tried to use grid. but hard to apply it with IonSplitPane when the screen becomes smaller, it just compresses the content rather than keeps the content’s width.