Avada is a fully responsive theme, with a range of options to control the various breakpoints, as well flexible responsive features such as the new Responsive Option Sets.

In this document, we’re going to have a look at the Responsive Options found in the Global Options (Avada > Options > Responsive). Continue reading below to learn what responsive breakpoints are, and watch the video for a visual overview.

These are specific pixel values that determine when the normal layout will change to a responsive layout. For example, if you enter 800px for the ‘Header Responsive Breakpoint’ option, then your header will change to the responsive mobile header when the screen, or viewport, is 800px wide. There are four responsive breakpoints – one for the Grid, the Header, the Site Content, and the Sidebar. These are detailed below.

Responsive Design – Leave on to use the responsive design features in Avada. If set to off, a fixed layout is used.

Grid Responsive Breakpoint – This controls when blog/portfolio grid layouts start to break into smaller columns. Further breakpoints are auto-calculated. Accepts a numeric value in pixels (px). For example, 1000.

Header Responsive Breakpoint – This controls when the desktop header changes to the mobile header. For side headers, the recommended breakpoint is 800px + the side header width. Accepts a numeric value in pixels (px). For example, 800.

Site Content Responsive Breakpoint – This controls when the site content area changes to the mobile layout. This includes all content below the header including the footer. If you are using a side header, the breakpoint value you enter will automatically include the side header width. Accepts a numeric value in pixels (px). For example, 800.

Sidebar Responsive Breakpoint – Controls when the sidebars change to the mobile layout. Accepts a numeric value in pixels (px). For example, 800.

Mobile Device Zoom – Turn on to enable pinch to zoom on mobile devices.

Small Screen – This controls when the small screen options and visibility should take effect. In pixels. This works in conjunction with the Responsive Icon in Avada Live, and the Responsive Options Sets feature.

Medium Screen – This controls when the medium screen options and visibility should take effect. In pixels.

Large Screen – Any screen larger than that which is defined as the medium screen will be counted as a large screen.

Responsive Typography Sensitivity – Set to 0 to disable responsive typography. Increase the value for a greater effect.

Minimum Font Size Factor – This determines the minimum font-size of elements affected by responsive typography using a multiplying value.