*If you haven’t yet, read about responsive design on studio here.

Some sections of your website such as a galleries, may need to be adapted to be well visible on smaller screen sizes.

Here is an example of a non-responsive layout.

In this specific example, each picture is sized as 33.3% of their container (1/3rd).

Because of this, as the page becomes smaller, each picture and its text becomes too small to see.

Here is an example of a responsive layout

Each element take up enough space on each screen size to be visible.

Read below to learn how to resize layouts to make them responsive.

Responsive Resizing 

To resize a gallery or other website sections to make them responsive:

  1. Check one by one each breakpoint using the responsive bar. Once you find a breakpoint that doesn’t look optimal, resize the elements.
  2. To effectively resize elements, choose % as unit of size. When there is not enough space on the page for multiple elements on the same line, set the width to 50% or 100% to only show one or two items per line.

Other sizing tips for responsive websites

It is advised to always use auto for parent boxes’s height to avoid content being cut on smaller screen sizes. To set height to auto, either double click on the top or bottom edge or use the top bar and choose ‘auto’.

Bad Example: when parent box height is set to px (pixel)

When height size of a parent box is set to px, the content is hidden as the page shrinks

Good example: when parent box height is set to auto

When parent box height is set to auto, it automatically accommodates for the content as the page shrinks.

Did this answer your question?