Skip to content

Using Breakpoints

Responsive design is a critical aspect of creating websites that provide an optimal viewing experience across various devices. It allows for inclusivity on different devices and provides a coherent user experience on each one.

Understanding Breakpoints

Think of Breakpoints as specific points where you define your webpage’s layouts and styles on different devices or screen sizes. For example, you might want two columns on desktops but switch down to a single column for tablets.

With this, you can set styles only when the browser’s viewport matches certain conditions, like a minimum or maximum width.

In WebbsAI, the primary breakpoint is the desktop. This serves as the default style for your website and influences the subsequent breakpoints—laptop, tablet, and mobile. When you make any change to the primary breakpoint, it cascades down to maintain consistency across all devices.

Styling Different Breakpoints

Breakpoints icons in WebbsAI

WebbsAI provides four main breakpoints:

  1. Desktop: 1920 px and onwards.
  2. Laptop: 1280 px to 1440 px.
  3. Tablet: 768 px to 961 px.
  4. Mobile: 240 px to 478 px.

WebbsAI provides granular control over each breakpoint. As you design the desktop breakpoint, your styles will cascade down and apply to the smaller breakpoints.

You can then override any styles inherited from a higher breakpoint by switching to that specific breakpoint and changing the relevant styles. Those adjustments then stay unique to that specific breakpoint.

If you set the display of a container to Inline Block on the desktop, the container’s display will still be Inline Block on all breakpoints unless you override styles on another breakpoint.

Accessing Breakpoints in the Editor

To switch between different breakpoints:

  1. Look for screen icons in your toolbar, each representing a device type for preview.

  2. Hover over them to see the pixel range for each screen type.