CSS Breakpoints & Media Queries

The default CSS Breakpoints for Page Builder Framework are set to 1024px for tablets and 768px for mobile devices. Your media queries in your CSS file would look something like this:

// 1024 - Tablets
@media screen and (max-width:1024px) {

}

// 768 - Mobiles
@media screen and (max-width:768px) {

}

With the Premium Add-On installed, you can change Page Builder Frameworks responsive Breakpoints under Theme Settings -> Responsive Breakpoints.


Responsive Body Classes

For maximum flexibility, we dynamically add body classes to each page on your website based on the current breakpoint. These classes will change if the screen is resized.

  • wpbf-is-desktop
  • wpbf-is-tablet
  • wpbf-is-mobile

Last updated on: July 13th, 2021


Related Articles

Scroll to Top

Download

Download Page Builder Framework and be the first to get informed about new features & updates!

OR

Get 10% off our Premium Add-On (yearly plan).
Coupon Code to enter during checkout: 10OFF View Pricing