Responsive Breakpoints

You can customize how your site looks on different devices using Gridbox's built-in responsive breakpoints (also known as media queries).

When you load a project, the default breakpoint is the Desktop view, but there are also two other device breakpoints to work with. This tutorial talks about:

  • Breakpoints

  • Switching breakpoints

  • Customizing your design on breakpoints

Breakpoints

Currently, Gridbox gives you three breakpoint views to preview and style your website for different device sizes.

Breakpoints

Each view is used to style elements for a particular viewport range:

  • Desktop (Screens larger than 992 pixels includes larger screens, such as desktop displays and laptops)

  • Tablet (screens between 768 and 991 pixels wide)

  • Mobile - Portrait (screens between 479 and 320 pixels)

Switching breakpoints

Whether you are in design mode or in preview mode, you can switch between different breakpoints using the device icons located in the left of the top bar in the Editor.

Switching Breakpoints

Customizing your design on Breakpoints

As you design your site in the default desktop view, the styles automatically cascade down to the smaller breakpoint views. You can switch between the breakpoint views to preview and adjust your design for each device. You can even create different layouts for each breakpoint. However, customizing breakpoints has rules:

  • Styles cascade from larger devices to smaller ones.

  • Styles set on a smaller breakpoint override styles inherited from larger breakpoints, so they no longer inherit style changes from the larger breakpoints.

  • Only changes in the Styles Manager cascade down. Any changes on the canvas or in the element settings affect all breakpoints.

  • Deleting or reordering elements affects these element on all breakpoints. You can hide elements per-device in element settings.

An Example

if you want to change the font-size of the particular heading in Mobile and Tablet Devices you can do the following:

  1. Click on the Heading Element that you want to customize

  2. Now click on the Tablet Icon in the left of the Topbar.

  3. From the Style Manager, open the Typography Settings

  4. Now Reduce the Font-Size to the desired value.

  5. Repeat the above steps for Mobile Breakpoint

  6. Now when switch to Desktop View, you can see the regular font-size and when switch to Tablet or Mobile View, you can see the changes in the font-size applied by you.

  7. The above steps will automatically generates the media queries for you.

Applying Breakpoints