Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Forum

Blog

Github

Signup

Made in Builder

Building responsive webpages

A responsive webpage is a page with a design or layout that adjusts depending on the screen width. This article describes ways to consider your site's responsiveness with Builder and shares tips on building with all screen sizes in mind.

A video walkthrough of building a responsive page

The following video is a demonstration of building a responsive webpage from scratch and touches on many of the concepts in this article.

Changing layout according to screen width

For a page to be responsive, the elements on the page should remain usable and the layout intentional at all screen sizes. If the items are getting too small on a small screen, try Builder's Columns block.

Recognizing the need for a responsive layout

The following row aligns the child elements horizontally. In this configuration, the items stay in a row, even at smaller screens, which is a challenge when building responsively:

Using columns to manage layout

Columns help the elements within them, such as pictures or text, rearrange on the display to fit every screen size.

Use columns when you need to arrange items in a single row at wider screen sizes but stack them on smaller screens.

Adding columns

To add Columns, drag and drop a Columns block from the Insert tab onto the page.

To change the number of columns:

  1. Select the Columns element by clicking on it. Be careful not to select the image or text inside the columns.
  2. Click the Edit button.
  3. Click the +Column button to add another column.

To check that your columns display the way you intend, view them at different screen sizes by clicking on the tablet and phone icons as in the following example.

To make more edits to columns:

  1. Select the Columns element.
  2. Click the Edit button.
  3. In the Edit dialogue, click Show Advanced.

In the Advanced section, you can do the following:

  • Adjust space between columns.
  • Set the size screen at which items stack.
  • Specify whether you want to reverse the order of the images and text when stacking.
  • Determine the screen size for stacking columns.

If you want the columns to be different sizes, you can drag left or right on the blue line between the columns, as in the following:

Making images responsive

Sometimes an image keeps shrinking as the screen gets smaller, while another image stays full width. You can control this behavior with the way you specify the image size.

Comparing responsive and fixed-width images

The following animation features two images, image A and image B. Image A has a width of 30%. Image B has a width of 400 pixels, or px for short.

In tablet and mobile view, image A responds to the screen size and is always 30% of the screen width while image B remains 400px wide on every screen size.

Depending on your use case, you might want to specify width in pixels. Generally however, a responsive image, with its width in a percentage, is ideal for all screen types, while a large fixed width limits flexibility.

Understanding width behavior

The width you give an image tells browsers how to display the image.

100% width

An image with 100% width makes the image–not including margin, padding, or border–100% width on the screen.

In the example below, the image overflows when we give the image margin, it overflows, indicated by the blue line to the right of the selected image.

Auto width

If you specify an auto width, which is the Builder default, the element fits in the available space–including its margin, border, and padding.

In the following example the content does not overflow when we apply margin.


How margins work

Margins create space around an element, pushing the element 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.

👉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 Align section, within the Style tab.

How padding works

Padding creates space within an element, pushing its content further inward and creating more space in the element.

In the following example, the button has a top and bottom padding that is pushing the content inward by 20 pixels.

👉Tip: 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 Align section, within the Style tab.



Controlling width with sections

Use sections to keep content from getting too wide. Drag and drop a Section block on the page. Then, place other types of blocks, such as Text, Image, Column, or Box blocks within the Section.

In the following example, we're adding a Section to the page and then, within the Section, a Columns block.

In the next example, we're adding a Box to a Section.

Up Next

Saving layers as templates
Was this article helpful?