Centering responsive layouts

Airkit studio makes it easy to manage your web views. You can create different layouts for small screen, tablet, large screens, and any other breakpoints you wish.

responsive_sm

On the Web flows view in the studio, you will see a “Page layouts” section in the left hand tree. In there you will see an option for standard layouts. You can create as many layouts as you wish for the breakpoints you are targeting. In this example, we have two - mobile and desktop.

To set when a layout is used, select a layout, and in the advanced options on the right, set your breakpoint. My breakpoint is at 800 pixels, so for mobile I am using browser.width <= 800 and for desktop I am using browser.width > 800.

Now, to keep the desktop constrained to a width on large monitors (you don’t necessarily want your content to take up full width on wide screens), I have a master container that I call “Page container” on the layout, with everything else inside of that.

On that container, set the max width to your desired max width (I’m using 800px, same as my breakpoint). Max width is hidden in the studio settings, but you can find it by looking in the Dimensions section in the editor on the right side of the page. Click on the ‘…’ options, and you’ll see it pop up, and you can add your desired max width.

Now to get it to center, we just have to add ‘auto’ to the left and right margin. We do that by clicking on the icon in the ‘Spacing’ section, and it will bring up a dialog box where you can type in the values.

And there you have it - thanks @davidpairkit for schooling me on this!

7 Likes

My only regret is that I cannot like this post more than once.

3 Likes

I was just running into this. Setting the margins to auto worked for me! Thank you @ackerman!

1 Like

Thanks @ackerman, this was very helpful in creating a client document on responsive design!

2 Likes