Responsive Design

Responsive design consists in designing web applications that adapt to smaller devices, like mobile and tablets.

WeWeb handles responsive design out of the box.

Three breakpoints

In WeWeb, you can customize the design at three breakpoint levels: desktop, tablet, and mobile:

Top down approach

When you customize a CSS property on a breakpoint, that style will be applied to all the smaller breakpoints:

• setting a font color on desktop will also apply on tablets and mobile devices
• setting a font weight on tablet will also apply on mobile, but not on desktop
• setting a font size on mobile will only apply on mobile, not on desktop or tablet

Add responsive style

To design responsively, switch between breakpoints in the top navigation menu, then change a style in the right sidebar.

You'll be able to see responsive styles when hovering them. A green icon will appear next to the property name and, if you click on it, you'll see on what breakpoint the change was made:

TIP

You can also access the information about a user's browser, including the breakpoint they're on, and use it to style responsively.

In the example below, we are saying that we only want to show the name column of a data grid when the browser breakpoint has the default value, i.e. when the user is on desktop:

Though it can be helpful in some cases such as the data grid example described above, note that this approach is harder to debug because it's hard to see if a responsive style is applied to an element just by looking at the style panel in the WeWeb editor.

Delete responsive style

If you hover a CSS style and click on one of the tablet or mobile icons, you'll remove the responsive style for that breakpoint:

Hide elements on mobile

To not display an element on tablet or mobile, DO NOT delete it.

Instead, we invite you to follow standard web development practices and edit:

• the CSS display property, or
• conditional rendering setting.