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 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 changes from desktop to tablet. It is best to use a column layout when you need to arrange items in a single row.
If you navigate to the "Option" tab, you will see "advanced options". Here you can decide when you want the columns to stack (tablet or mobile), and if you want the columns to reverse when stacked. If you want the columns to be different sizes, you can pull left or right on the blue line between the columns.
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.
Sections & boxes
In Builder, you can use sections and boxes. Both are beneficial but they serve different purposes. A section is used to keep content from getting too wide and keeps consistency throughout page.
A box can be used to group elements on a page and should be places in a section.