Breakpoints
Breakpoints are predefined points that determine how the card layout from home screen adapts to different screen sizes. Each breakpoint is associated with a specific screen size and features its own distinct layout, which can be customized individually for each screen. This provides the flexibility to modify the layout of cards according to your specific needs and preferences on different screens.The following breakpoints are used:
Desktop: for large screens with a width equal to or greater than 1200 pixels.
Laptop: for medium screens with a width between 1200 and 1000 pixels.
Tablet: for small screens with a width between 1000 and 600 pixels.
Smartphone: for very small screens with a width below 600 pixels.
Preview Breakpoints
The preview breakpoint functionality is a tool for simulating and adjusting the card layout for the home screen of your application for various screen sizes. It allows you to preview how the cards will be displayed at specific breakpoints and make necessary adjustments to ensure consistency. It is available in the administration area.
To use the preview breakpoint functionality, follow these steps:
1. Identify the desired breakpoint to simulate. For example, select the smartphone breakpoint from the left menu. In preview mode, the screen with the cards will have a dashed border and display the current preview screen size on top.
2.Adjust the card layout for the selected breakpoint. Modify the width, position, and other elements as needed to ensure proper presentation at each breakpoint. Remember to save your changes when finished.
3.Check if the cards are displayed properly at each breakpoint during the preview. If any issues or areas for improvement are identified, make the necessary adjustments to ensure a consistent and pleasant user experience.
Repeat the process for other breakpoints, if necessary. Simulate and adjust the card layout for different screen sizes to ensure compatibility across a variety of devices
Last updated
