Responsive design and Media Queries

How to make your website look good on every screen using relative sizing and media queries

Relative sizing
Media queries
Video: How to make your design responsive

1. Relative sizing

The first thing in making your layout responsive is to consider using relative sizing instead of fixed sizing. Considering you have an image whose size is set to a specific width in pixels. If the viewport is smaller than the element itself, the image won't be fully visible.

Relative sizing means setting properties for elements relative to the browser viewport or the parent element. Instead of using a pixel-based size, you might consider using different units such as %, VW or VH. VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen. And, of course, VW stands for “viewport width”, which is the viewable screen's width.

If you use any of these units on an image and adjust the browser width or height, you can see that it will adapt accordingly.



When working with fonts, instead of using px, we recommend using Ems or Rems. Ems units are useful for size properties that need to scale based on the parent element's font-size, so if the parent has font-size set to 16px, 1em will be 16px. Rems (Root ems) are relative to the root HTML element font-size and they consider the browser font-size settings. For complex layout arrangements, use percentage (%).

In short, to make an item responsive and having it grow or shrink depending on screen size consider using % values.

2. Media queries

When working with more complex layouts, you will usually consider using breakpoints. A breakpoint or a media query is a specific width number that allows you to modify the design of the elements.

Entering the Visual Editor, the default Canvas width is 1200px, the desktop view. The existing media queries that we currently support are: 991, 767 and 479. Style changes cascade both up and down (bidirectional cascade), so any change made on 991px will be visible on any screen with width less than 991px. Additionally, any inherited styles from a higher breakpoint can be overridden.

You can enable a media query either by selecting an option from the top right of the Canvas or by dragging its horizontal margins and resizing.



If a media query is enabled, a fixed message will be displayed at the bottom of the page. Each media query has a specific color: blue, yellow and orange that will be used to indicate style changes in both Visual and Advanced inspector.

​When a media query is enabled all the style changes that are being submitted will be applied starting from this viewport width and down.
When changing a property from the Visual Inspector we will see the section title highlighted with the breakpoint specific color.



Once you've selected a media query you can start making edits exactly as before, but changes will now be applied only for that media query. You can even change the position of an element inside of the container from desktop to mobile for example.

Considering the CSS limitation that a property can not be removed from a breakpoint to another, if that style key exists and is inherited, deleting it's value will replace it with a default one ('0px' or 'transparent' in most cases).



Moreover, right clicking on the section title and choosing Reset values from the context menu will delete all the changes made on the current media query and reset to all inherited values from the section.



In the Advanced Inspector, all the styles changes made on a specific media query are added in a separate section to be easily identified. From there you also have the possibility to add new properties in the right section no matter the Canvas size.

The section title will be colored if the enabled media query is the one described in that section.



Additional media queries can be added to the project and existing ones can also be edited. To do this, click on the "⋮ icon" next to the Media Queries to open the Media Query modal. Here you can add new custom media queries or edit existing ones.

3. How to make your design responsive

To make everything we mentioned here a bit easier to digest, we recommend you watch our YouTube video on responsive design.

Updated on: 07/04/2023