Mobile & Breakpoints

TheGem Breakpoints

TheGem uses following breakpoints for different devices and screen resolutions:

  • Large Devices (Desktop): >= 1212px
  • Medium Devices (Notebooks): >= 992px
  • Small Devices (Tablets): >= 768px
  • Extra small devices (Phones): < 768px

Elementor Breakpoints

By default, Elementor uses following breakpoints for different devices and screen resolutions: 

  • Desktop: >= 1025px
  • Tablet: >= 768px
  • Phones: < 768px

This settings can be adjusted in Elementor’s settings as described here

Custom Breakpoints

As you can see, Elementor serves only three screen resolution ranges, while TheGem offers you a wider range of breakpoints, basing on Bootstrap. To resolve this mismatch, TheGem elements plugin includes an extension“Custom Breakpoints”. With this extension you have much more flexibility in managing your layouts under different screen resolutions. For more details on Custom Breakpoints please read this chapter 

Mobile Editing

TheGem Elements plugin includes responsive options on many controls and settings of each content element. Please check this details on how to work with mobile settings in TheGem Responsive Options.