Responsiveness

this document provides guidance for making applications created using simplita ai fully responsive across devices (desktop, tablet, and mobile) ijf configuring the application for responsiveness when creating an application using simplita ai , responsiveness depends on the type of components used using predefined components if you use predefined components such as sections (hero, feature cards, topbar, etc ) templates tables you do not need to perform any additional actions for responsiveness these components are already built with responsive behavior using position components if you use position components (drag and drop elements from the position components in simplita ai) do not remove width and height → these are required for the positioned layout to render correctly apply flexbox properties at all levels(including all div containers) in position components, the width/height remain fixed, but flex properties make the layout responsive across screen sizes note you should apply the flex property across all the div's in the inserted component user guide video tutorial manually designing a section from scratch (flexbox required) if you create custom sections manually, you must apply flexbox properties to make them responsive for parent divs remove fixed height and width, then apply flex properties for child divs keep height/width if the elements are of the same type remove height/width if the elements are mixed types images/videos → keep height and width apply flex direction, justify content, align items, flex wrap, and gap based on layout requirements (explained in detail in the flex properties section below) flex properties detailed usage guide flex direction controls the direction of items inside the container option purpose when to use row (default) arranges items horizontally from left to right use for horizontal layouts like navigation bars, product cards, or columns that should sit side by side on desktop row reverse arranges items horizontally from right to left use when you want the order reversed (e g , aligning icons/text starting from the right side) column arranges items vertically from top to bottom use for stacking elements on smaller screens (e g , text above image on mobile view) column reverse arranges items vertically from bottom to top use when you want items to appear from bottom upwards (rare, but useful for chat uis or dynamic content) justify content aligns items along the main axis (horizontal if row, vertical if column) option purpose when to use flex start (default) packs items at the start of the main axis use for left aligned navbars, top aligned columns flex end packs items at the end of the main axis use for right aligned navbars, bottom aligned vertical stacks center centers items along the main axis use for centering buttons, logos, or icons space between even spacing between items, with first item at start and last item at end use for navbars with equal spacing or card layouts space around equal space around each item (half space at edges) use when you want items spaced evenly with margins space evenly equal spacing between items and edges use for perfectly balanced layouts like button groups align items aligns items along the cross axis (vertical if row, horizontal if column) option purpose when to use flex start aligns items to the top (row) or left (column) use when elements should stick to the top/left flex end aligns items to the bottom (row) or right (column) use for bottom aligned buttons, right side layouts center centers items along the cross axis use for vertically centering content in a horizontal layout baseline aligns items based on text baseline use when text inside items should line up neatly stretch (default) stretches items to fill container height/width use when cards or divs should equalize height f lex wrap controls whether items should stay on one line or wrap to the next option purpose when to use nowrap (default) all items stay on one line (they shrink if needed) use for toolbars or menus where items should never break line wrap items move onto new lines when space runs out use for grids, cards, or galleries to ensure items stack on smaller screens wrap reverse like wrap, but items wrap in the reverse direction rare, but use when you need overflow to stack upwards instead of downwards completing layout responsiveness repeat the steps for all sections in the application test thoroughly across different screen sizes using chrome devtools → responsive mode user guide video tutorial best practice tips prefer predefined components → already responsive for manual sections → remove width/height (except images, videos, or same type groups) for position components → keep width/height, but apply flex to all parent and child divs use flex wrap wrap for multi item layouts always validate responsiveness on mobile, tablet, and desktop