Styling in different breakpoints

Responsive Breakpoints (CSS media queries) are used to control your site's design in different resolutions. A huge part of creating a responsive website in RapidUI, is creating your own breakpoints and editing them to make your layout look as you wish (check out this guide for more information on Breakpoints).

When making styling adjustments in different breakpoints, you can create specific styling changes for each breakpoint.

When editing in a certain breakpoint, the changes made will only appear on that breakpoint.This way you can make changes in specific breakpoints only, and make your site look great in every resolution.

Every breakpoint is marked with a unique color, that appears on the resolution bar to indicate at which breakpoint you are currently working.

So, how to style in a specific breakpoint?

1. Create breakpoints where you wish by clicking ‘+ Break Point’ while at the desired resolution on the bar (a full explanation about breakpoints can be found here).
   
   
2. While remaining in the breakpoint, open the styling panel and select the desired breakpoint’s styling rules you wish to edit - the element is marked by the color of its breakpoint (see picture below, text-1 (768-1140) with the purple line on the right side represents the element in the purple breakpoint, as opposed to the others that are marked with the blue desktop resolution color).
3. Lastly, make whatever styling changes you wish for the breakpoint!

Notice - When styling within a breakpoint, you will have two different styling options:

• Styling in Breakpoint:  Create changes for the element that will only apply within the specific breakpoint range. It will be marked with the color of your breakpoint.
  
  

• Styling in all breakpoints: Rules that will apply to all breakpoints. These rules will be marked in blue - the default desktop resolution breakpoint color.
  
  

So make sure you’re editing the element within the desired breakpoint, and not affecting the whole page!