Transcript

In this Quick Tip, we're going to learn about layout and sizing properties that are available to use in conditionals with the responsive engine. Let's take a look at an example!

Let's imagine a navigation with a row layout using "space between". As we resize, the layout stays the same. And while this looks good on larger screens, as we get to mobile widths, we want to adjust how this responds.

In the past, we would opt for hiding and showing a new group altogether. But with the new responsive properties available to us, we can simply adjust the row container alignment by adding a condition.

To do this, we'll select our row group and create a condition that targets the screen size where we want the alignment to change. Now we can switch from "space between" to something better suited for mobile, like "centered". Now when we resize the screen we can see the alignment change as we hit the target width!

There's a closely related concept in CSS called "Breakpoints" which exist to help make layouts mobile-friendly. While this feature isn't exactly Breakpoints, you can use "Current page width" and these properties to exercise similar control. Each responsive container layout has their corresponding properties that can be controlled conditionally.

In addition, we can also take advantage of universal sizing properties that are available to us. By controlling these conditionally, you'll be able to build more flexible designs for all screen sizes.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.