The Grid Container is an area of 1200 px in width limited by the grid. If you want the element to always be visible on any screen, position it within this container. Images and texts are usually positioned within the Grid Container.
When adapting the design to tablet and mobile screens, the Grid Container gets scaled down to 980, 640, 480, 320 px and the elements remain aligned to the grid.
❗️Common error: Placing the element outside of the grid but attaching it to the grid. In this case, it can be cropped or invisible on some screens. This can be an intended design solution, however, don't use it for texts or key elements.
The Window Container defines the browser window borders. It allows you to attach elements to the screen, not to the grid. This is the way to go if you want to fix the logo in the top left corner on any screen. To do this, open the Element Settings and choose Window under Container. The origin will shift to the top left corner of the container.
❗️ Common error: Positioning the element from the opposite border. By default, if you switch to the Window Container, the element positioning will be in the top left corner. If you want the element to be in the right top corner, set the element positioning in the Window Container to (Right, Top).
📌 Window Container is used to create fluid elements: Their sizes change depending on the browser window width.
🤓 Let's say you want 50% of the screen to be always green. Add a shape, select Window Container in the Element Settings, switch the width (W) and height (H) units from pixels to percent and set width to 50% and height to 100%.
You can also set the element position (X, Y) in percent—to fix the element on the right half of the screen, set the X axis value to 50%.
❗️Common error: Setting the value in percent relative to the grid. Then the spacing from the element to the edge of the screen will differ depending on the screen resolution.
Learn more about design process in Zero Block: https://help.tilda.cc/zero
