And by setting a maximum width, you’ll limit how wide an element can be. By setting a minimum width on a group, you can stop that from happening by limiting how far the group can squeeze its contents. Elements can break to new lines inside of them.
Groups (and other containers, such as Repeating Groups) work like mini-pages.In other words, overlapping elements both break, or neither breaks, and they are both shown or neither is shown by any show/hide rules. Overlapping elements move together: they expand or shrink together (unless one of the elements is set to fixed width or has a maximum width).You can control this on an element-by-element basis in the Property Editor or the Responsive Viewer. By default, most elements are shrinkable and expandable.Bubble only expands margins if all elements on a line are at their maximum widths, and only shrinks margins if all elements are at their minimum widths and everything that could break to the next line is already on the next line. In general, as the page gets resized, elements shrink and expand before margins do.While you can tweak and see in real time the impact of the parameters (see below), it is good to have an overall understanding of how the rendering engine works. The algorithm that controls how the page is rendered follows a few core principles. Modify the different settings and you’ll see how it impacts the page in real time. When you click on an element, the responsive palette will display the different parameters you can modify to affect its behavior. You can also use the preset width icons on the left side of the screen to see how the page looks on iPhone in portrait mode, in landscape mode, on an iPad and on a laptop or a desktop. Just click or drag on the ruler to resize the page and see how the page behaves dynamically. In this view, the ruler at the top of the page area defines the current page width. You will find a dropdown above the New Element palette that lets you switch between the Builder View, where you can modify elements, drag new ones, and delete some, and the Responsive Viewer which lets you test your page under different configurations and modify the responsive behavior of each element. The responsive view lets you modify a few parameters that will change how the page behaves when it's being squeezed.
That's what the responsive view mode is for (you can also just run your app and modify the size of the browser). Then, once you're done with the wide ("laptop") design, you can start working on narrower designs. You should start designing the page as it should appear on a wide screen, for instance your laptop. Bubble offers a few parameters to control how they look on different screens. In other words, they will adjust automatically to the width of the device they're seen on.
0 kommentar(er)
