[Music] welcome to the responsive engine beta introducing powerful new ways to build layouts based on css flexbox in bubble in this tutorial we're going to walk through how the engine works and the new features at your disposal to make a page with a new engine we upgrade it in the responsive tab currently you must do this for every page you want to use the new responsive engine with including reusable elements since they act as their own page once the page is upgraded the new responsive controls become available here's how it works every container element has a container layout for organizing its child elements building responsively now follows the principles of the container layout you choose the page itself is a container so for a page to be responsive we must select a responsive container layout there are four container layouts to choose from all of which are responsive except for fixed child elements added to a fixed container will stay absolutely positioned within that parent container so you can still drag and drop or resize elements as you're used to however a fixed container layout will not respond to changes in screen or content size since what you see is what you get let's change the page container layout to align to parent child elements added to an aligned apparent container are pinned to a non-ant a non-ant is like a quadrant but instead of being divided into four parts the parent container is divided into nine parts a new element added to this container type will automatically pin to the nearest non-it here i've added two shapes to my page which has a container layout of aligned apparent let's select shape a and pin it to the top left and for shape b let's pin it to the top right when we resize the page in the responsive tab we can see these elements stay pinned to their assigned non-ant as the page grows and shrinks next we have row child elements in a row container will align horizontally by default when a new child element is added to a row it will be added to the end of the list of elements already inside as the pairing container shrinks elements will wrap down in order and as it grows elements will join the previous row finally child elements placed in the column layout will stack vertically regardless of how the page grows or shrinks as we draw new elements into a column layout the new element will be added to the end of the list of elements already inside child elements have specific layout controls available depending on the container layout of their parent container for instance our page container layout is set to column if we select one of these child shape elements we have horizontal alignment options with how we can position this element in the column we can left center right align and even stretch to fit depending on the container layout different alignment options will be available in responsive containers you can no longer drag and drop as the size and position of a child element are now determined by the layout and margin settings in the property editor in addition to existing width controls elements can now have a fixed or min and max height both max width and max height can be infinite with respect to its parent container opening up the door to more control the width and height properties of an element can be set as either pixels or now percentages relative to its parent container another new feature is that elements can have margins with margins your element will now align and snap based on the margin border instead of the element border this is because the margin is now factored into the overall size of the element's width and height you can even set margins conditionally so you can increase or decrease margins at different page widths repeating groups have also seen an upgrade to be compatible with the new responsive engine rather than discrete repeating group types fully custom behavior can be set at the cell level with new container layouts and width and height controls as you build with the new engine mix and match container layouts based on their specific behavior pay close attention to the child elements you add to a specific container layout and use their new properties to build responsively that's it for this tutorial for more be sure to check out bubble academy