Mastering Responsive design with Builder.io
Use these tips to master responsive design and 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 creates space around an element, pushing itself away from other elements. In the example below, the highlighted button has a top margin that is pushing itself away from the top button by 20 pixels.
Padding creates space within an element, pushing its content further in and creating more space in the element. In the example below, the button has a top and bottom padding that is pushing the content inward by 20 pixels.
👉Tip: Use margin when you need to create small space between elements. Don't use margin to align elements, this will cause your page to not be responsive. Instead, use the alignment section.
Use padding when you need to create small space within an element. Don't use padding to align text or elements, this will cause your page to not be responsive. Instead, use the alignment or text alignment section.
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.