BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

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

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Guides

Quick start

SEO optimizing Builder.io 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 Builder.io with plugins

REST API

HTML API

Content API

GraphQL API

Webhooks

Write API

React

Getting started

Using Next.js

Using Gatsby

Using your React components in Builder

New!

Components-only mode

Triggering custom actions

Angular

Ruby on rails

Webcomponents

Github

Mastering Responsive design with Builder.io

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

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

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