This page was made in Builder!


Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu







Quick start

SEO optimizing content

Creating custom models

Using custom fields

Enable on-site previewing and editing

Dynamic URLs and advanced data fetching

Adding Custom Code

Using 3rd party libraries

Import HTML

Extending with plugins



Content API



Write API


Getting started

Using Next.js

Using Gatsby

Using your React components in Builder


Components-only mode

Triggering custom actions


Ruby on rails



Mastering Responsive design with

Use these tips to master responsive design and advanced editing in!

Mastering responsive design is extremely important when creating your website. Users will be viewing your website from various screen sizes, and you’ll want your layout to be able to adapt and look nice on every users screen. We will be covering:


Columns allow the elements to automatically rearrange themselves to fit every screen size. This allows you to maintain a consistent look and saves you time when styling your pages. In the example below, you'll see the columns go from horizontal to vertical when the device mode is changes from desktop to tablet. It is best to use a column layout when you need to arrange items in a single row.

Child element layouts

There are several ways you can layout your child elements. View the examples of each layout below

Column: Best used when you need to arrange items in a single row.

Row: Aligns the child elements horizontally

Stack: Aligns the child elements vertically

Grid: Best used when you need to arrange elements in multiple rows.

Scroll: Allows you to have a lot of content that won't overflow or take up a large amount of a page.

Fixed and fluid width content

Let’s say we are styling two images, we will call them image A and image B. Image A has been given a width of 30%. Image B has been given a width of 400px. When we view our page in tablet and mobile view, image A is relative and image B is fixed. Image A will respond to the screen size and always be 30% of that screen while image B will remain 400px in width on every screen size. This doesn’t mean you should never use px when designing your pages, it just depends on what you’re styling. A good rule of thumb is do not use large fixed width elements.

Two other widths that are important to talk about are auto width and 100% width. If you give an image 100% width, it will make this image (not including any margin, padding, or border) 100% width on the screen. In the example below, you'll see that if you give your image margin, it will overflow.

If you give an auto width (this is the default in Builder), it will fit the element in available space (including its margin, border, and padding). You'll see in the example below that the content will not overflow when margin is applied.

Margin & padding

Margin and padding are used to space out elements. Margin is used to create space on the outside of your element, and padding is used to create space on the inside. They are very helpful when styling your pages, but they can cause issues for responsiveness if you don’t use them correctly. Let's say you are viewing your page in desktop mode and you add a left margin of 100px on an image. When you view your page in mobile view, this image will be fixed with a 100px left margin and will not be responsive in mobile view. It is best to avoid using margin and padding to align your items. Instead, use the alignment section to place your content. Now if you view your page in mobile view, your image will still be aligned to the right, but your layout is now responsive and will adjust accordingly.

As states above, it is best practice to align your content using the alignment section in the editor. Below is an example of where to find the alignment section and a preview of how content looks aligned and how it responds to changes in screen size.

Up Next

Saving layers as templates