Responsive Breakpoints

10/20/2016
IMPORTANT NOTE – This option is only available in Avada version 3.8.8 or higher.

Avada includes 4 Responsive Breakpoint options. The ability to change the Header, Site Content, Sidebars and Grid Responsive Breakpoint. These options are located in the Theme Options > Responsive tab. Continue reading below to learn what a responsive breakpoint is, and what these 4 options do.

What Is A Responsive Breakpoint?

A responsive breakpoint is a specific pixel value that allows the normal layout to change to the responsive layout. For example, if you enter 800px for the ‘Header Responsive Breakpoint’ option, then your header will change to the responsive mobile header at 800px wide.

Responsive Breakpoint Options

Grid Responsive Breakpoint – Illustrated as A, this option 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 – Illustrated as B, this option 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 – Illustrated as C, this option 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 – Illustrated as D, this option controls when the sidebars change to the mobile layout. Accepts a numeric value in pixels (px). For example, 800.

How To Set The Responsive Breakpoint Options

Step 1 – Navigate to the Avada > Theme Options > Responsive tab on your WordPress admin sidebar.

Step 2 – Find the Responsive Breakpoint option that you’d like to set.

Step 3 – Enter a numeric value in pixels (px) to set as your breakpoint or drag the slider left/right. For example, 800. If you’re entering a Mobile Header Responsive Breakpoint, please note that for side headers, the recommended breakpoint is 800 plus the side header width. For example, if your side header width is 250px the recommended breakpoint would be 1050.


5 Likes
Proudly Serving Over 390000 Satisfied Users!