Query: How can I ensure that my ionic mobile application renders in the center of the screen when viewed on a desktop browser?
Attempt 1: I experimented with using a wrapper div with a fixed width, such as max-width:732px; and margin: 0 auto;, however Ionic does not allow the addition of a div over the app screen which resulted in a blank screen.
Attempt 2: I tried setting the width for inner elements like headers, footers, and ionic-view to align them in the center. However, the header's .bar class caused issues as it is a positioned element, and this fix did not produce the desired outcome.
Attempt 3: I attempted to use positioning and set the width to calc(50% - 732px);, but the header still broke.
My Insight: The .scroll-content within Ionic is a positioned element that creates a new element for scrolling, making it challenging to center using methods like margin, text-align, wrapper, or inner elements.
Expectation: Is there a solution to fix this issue where my application can be displayed independently of resolution and centered on the screen? Here is an example of the desired layout: https://jsfiddle.net/HarishBoke/26a6dbbu/1/
Any assistance is greatly appreciated. Thank you in advance.