Conference app example – Mobile Web Development


For example, let’s go take a look at the front page of our Conference Application. First, let’s look at it in Landscape Mode on a Tablet, now let’s look at it on the phone. See how the layout is different? Let’s take a look on this on the Desktop and see how it adjusts, when you drag the Window. You can see how the Buttons pop into two rows when the window gets too narrow to fit all four comfortably, let’s take a look at the magic that makes this happen, it’s actually quite simple. The Menu items are laid out inside a flex box, and the items inside that flex box by default are told to take up 46% of the available space. That means, of course, that only two items will fit on a line. However, there’s an app media rule that overrides this if there’s a minimum width of the window of 500 pixels. In that case, the items will each only take up 24% of the space, so all four items will fit on a single line. Using Flexbox can be a great way to transform your page. You can change flex direction or flex order to make dramatic interface changes like the one I did in the Audio Recorder earlier on.

Add a Comment

Your email address will not be published. Required fields are marked *