As a part of creating a responsive website in RapidUI, you'll be creating your designated breakpoints and editing them to make your layout look as you wish. This will make your site look great in every resolution.
In this guide, we’re going to walk you through the process of specific styling according to different breakpoints.
First, create breakpoints where you wish (short explanation about breakpoints can be found here).
Now, if you want to make changes in a specific breakpoint (resolution), for example, enlarge font size - all you have to do is pick the resolution in the styling menu, and start editing in it!
- Hover on (Current element):
Allows you to create changes that will apply only when hovering the mouse over your element.
- Current element:
Create changes for an element that will apply on all breakpoints.
- All layers:
Create changes to the entire page and every layer. They will apply on all breakpoints as well.
Note: When editing in a certain breakpoint, the changes made will only appear on that breakpoint. Therefore, when editing in the selected breakpoint (left-side arrow), the changes will only be seen when presenting the website in the resolution range (upper-right arrow).
This way, you can change your site’s styling in a certain resolution, without affecting your design for different devices and resolution screens.
Don’t forget - use the scale to fit tool before making changes in your breakpoints (scale to fit tool guide).