# Responsive design best practices > Structure your screen into boxes by responsibility so it adapts as one. Explore responsive layout patterns using Flexbox, adaptable backgrounds, centering, and safe zones to build layouts that hold together across every screen size. https://docs.pandasuite.com/essentials/layout/responsive-design-best-practices/ **Discover how to structure your project for seamless responsiveness. These insights will save you a ton of time.** > **Info** > > We recommend checking out the [Responsive > design](https://docs.pandasuite.com/essentials/layout/responsive-design/) article first. ## Structure before settings: think in boxes Most responsive difficulties come not from a wrong setting, but from a missing structure. Before adjusting anything, break your screen down into boxes, and give each box a single responsibility: a set of elements that will move, resize, and respond as one. Take a common screen: a header, a content area, and a row of cards. The header is a box, pinned to the top. The content is a box that fills the rest. Each card is a box that brings together its image, its title, and its button. You then set each box once, instead of each element one by one, and the screen adapts as a whole. The benefit goes beyond responsiveness. A well-scoped box is set once, moves and animates as a block, can be reused or turned into a component, and connects to an interaction in a single step. Because each box maps to a real part of your screen, the whole stays easy to change. The two mistakes to avoid are symmetrical: leaving everything independent, so each element drifts on its own and you chase them one by one; or gathering everything into one large box, so nothing can adapt separately. The design work is to place the right boundaries: one box per responsibility. The patterns below are all applications of this idea: centering keeps a whole composition as a single box, a fixed bar reserves a safe zone for the content box, and Flexbox is a box that arranges its children for you. ## Automatically Adjust Content with Flexbox The [Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/) component is a container that auto-adjusts its scroll size based on its content, aligning items evenly along a primary axis (horizontal or vertical). It auto-adjusts (**Aspect Fit**), letting you position "child" items without fretting over responsiveness. Each item keeps the space set by the container's **Padding** values (10 px on each side by default), regardless of its size adjustments. The items dictate their own size changes. Position your items within. Pick the padding around items and the orientation (vertical or horizontal). Flexbox even lets you form a grid: just activate the **Wrap** feature on the container, allowing items to line up across multiple rows if needed. [Video: three garden cards stack in a vertical Flexbox; raising its top, then its bottom padding with the arrows spaces the cards further apart] ## Use an Adaptable Background A simple trick for a responsive layout is to fit the background to the screen's dimensions. This matters when the screen itself is set to **Stretch**, so that it follows the device's shape: in the default **Aspect Fit**, the whole screen keeps its proportions. If the backdrop is a shape, stretch it directly (**Stretch**). For image backgrounds, set them to the **Aspect Fill** setting to maintain the image's proportions, ensuring it covers the screen flawlessly, even if it extends beyond its borders. [Video: in the responsive preview, the Welcome screen is widened then narrowed; the park background, in Aspect Fill, always covers it] For images, it's crucial to keep their proportions. Select the image's cropped section to ensure there's no empty space and use **Aspect Fill**. ## Center Items on Every Screen Size When your whole content should stay together as one proportional block, group it and center that block. With a responsive background behind it, your original layout is preserved at every screen size. [Group your content](https://docs.pandasuite.com/essentials/components/group/) into a single box. The group's size matters, as it is what gets centered on the page. Opt for the Aspect Fit setting and pin the group on all four sides with the [Size & Position Scale](https://docs.pandasuite.com/essentials/layout/responsive-design/) choices, so it stays in the middle. [Image: Quiz block group selected on the Quiz screen: its Size & Position Scale is pinned on all four sides, in Aspect Fit] The quiz picture and question card are grouped into one block, pinned on all four sides and set to Aspect Fit. [Image: Inside the Quiz block group, the Question card is selected: its Size & Position Scale is also in Aspect Fit] Optionally position "child" items in Aspect Fit. [Video: the responsive preview is widened then narrowed, and the quiz block stays centered and proportional over its background] ## Keep Content Clear of a Fixed Bar When a screen has a fixed element on top of it, such as a navigation bar or header placed in a [foreground](https://docs.pandasuite.com/essentials/project-properties/foreground-and-background/), that foreground floats over your screen and does not reserve space on its own. Left alone, your content runs underneath it and gets hidden on some screen sizes. The fix is to reserve the bar's space yourself, then let your real content scale inside what remains: 1. Set your screen to **Stretch** so it fills the device and you can position content against its edges. 2. [Group](https://docs.pandasuite.com/essentials/components/group/) the meaningful content (logo, title, text, button…) together. 3. Position and size that group so it stops above the bar, leaving a **safe zone** the foreground never overlaps. 4. Set the group to **Aspect Fit**. It now scales as one block inside that safe zone, keeping its proportions and staying clear of the bar at any screen size. The payoff: you tune one group instead of every element, and nothing slips under the bar.