

There are several settings that allow you to create responsive layouts. Making layouts change as the screen size changes is called “responsive” design.
LAYOUTEDITOR DESIGN FULL
However, you may not want the image to become so big or the text expands to the full width of the screen making it hard to read (see the example in the image below). Desktops offer more space allowing your components to expand, scale, and unwrap. However, you may want to consider different options for desktop screens and rows.Ĭreating layouts for wide and narrow screens (ie responsive design)Ī layout that works well for narrow mobile screens is often not suitable for landscape widescreens found on desktops. This is often all you want for a mobile screen. Spacing of the elements can be achieved by changing their margins and paddings. Centering text on a screen but keeping it left-alignedīy default Fliplet components will line up in a column – top to bottom – with typically one component per row.Centering components horizontally and vertically.Creating full-width images (without skewing the image).Creating layered or overlapping designs.Creating layouts for wide and narrow screens (ie responsive design).What can I do with the drag and drop system? For more information on container components please visit this article. To precisely position a component on a screen you typically need to use a combination of appearance settings (to set size, margins, positioning-type) and possibly a container component to specify a relationship between your other components (to specify alignment, wrapping, grouping). So if one element gets bigger it will ‘push’ its neighbor down a row. This means layouts are defined by the relationship between the components rather than a fixed location – eg, two elements have a certain margin between them, a fixed distance from an edge, or will fill the space left in a row. Fliplet apps use the same approach as website designers – “responsive” layouts.
