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 true 220,220,222 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type justify content aligns items along the main axis (horizontal if row, vertical if column) true 220,220,222 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type align items aligns items along the cross axis (vertical if row, horizontal if column) true 100,201,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type f lex wrap controls whether items should stay on one line or wrap to the next true 108,100,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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