Prerequisites

The.com Basics

Media Queries

When building on the web, you need to make sure that your website is responsive. This means that it looks good when viewed on a desktop, laptop, tablet, or phone. 

The.com allows you to edit styles for specific screen widths, known as media queries. The different screen modes are:

• Screen (default)
• Mobile S - 320px or less
• Mobile M - 375px or less
• Mobile L - 425px or less
• Tablet - 768px or less
• TV Screen - 2560 or more
• Big TV Screen - 2920 or more

You can switch to a media query editing mode by clicking on the Phone icon in the Toolbar when editing a Page or Block and then selecting which screen size you want.

You'll notice that the Toolbar turns blue, signifying that you are in a special editing mode. In this case, the media query mode. 

You can now overwrite or add new styles to existing elements and those styles will only apply if the screen size matches that of the media query you selected. 

For example, if you are editing for tablet mode, the styles you add will only be applied when the screen size is 768px or less.