Responsive scaling grid layout breakpoints

The Isotoop System is fully responsive for the view at all devices. Your texts and typography will scale on the following breakpoints.

Automatic stacking

On mobile devices, tablets and below, the columns will automatically stack on XXS and XS, below 577 pixels, if you use WPGS responsive html.
WPGS responsive html editor

All breakpoints of Isotoop

Isotoop has 6 breakpoints:

XX-Smallxxs0 – 420px
X-Smallxs420px – 576px
Smalls577px – 768px
Mediummd769px – 992px
Largelg993px – 1200px
Extra largexl1201px – 1400px
Extra extra largexxl1401px and bigger

WordPress and other frameworks

WPGS has the best of both worlds. A combination of existing html frameworks but then applied to WordPress.

Let’s check some popular frameworks to get an idea of what approach to follow.

Bootstrap has 4 breakpoints at 576px, 768px, 992px, and 1200px. 
Foundation mainly has 2 breakpoints at 40em and 64em.
Bulma has 5 breakpoints at 768px, 769px, 1024px, 1216px, and 1408px.

Bootstrap breakpoints

X-SmallNone0–576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px

WordPress Page builders breakpoints

Page builders don’t have breakpoints for smaller devices. The lowest breakpoint for most WordPress page builders is 768 pixels.
768/576=1.3333

Most page builders heave 2 responsive breakpoints. WPGS has 6 breakpoints. This enhances your design and typography.

Beaver builder breakpoints

Smallmd0-768px
Mediumlg769-991px
Largexl≥992px

Elementor breakpoints

Smallmd0-768px
Mediumlg769-1024px
Largexl≥1025px

By default, Elementor offers 3 breakpoints:

https://elementor.com/help/global-layout-settings

Scroll to Top