I’m trying to create a unified mobile/desktop web UI. Is there a way to center and size appropriately a typical UI with a left hand menu and right hand ion-page element (in a split pane)? This works fine on mobile but the UI is WAY too big when stretched for the desktop, so I’d like to simply say something like: my UI is 1000px wide (200px for menu, 800px for main content) and then centered horizontally. Is there a reasonably simple way to do this? My CSS skills are very basic and I’ve been striking out so far. Thanks…
Try adding to app.component.scss
ion-split-pane {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Change the max-width to whatever your target maximum desktop size is.
1 Like