How to hide PB. Element on different viewport width (mobile/tablet/desktop)

Sometimes you might want to hide or display a certain element or content on mobiles.

To hide an element, say – on mobiles, simply access the element options and open the “Misc. options” tab, where you’ll find this option eg: . Simply click on the viewport breakpoint (device) and this will hide the element on mobiles.

Please know that this option works per screen width, not device and media queries CSS are applied for them. Meaning they will be loaded, but hidden.

Here’s how the viewport breakpoints work:

  • Large – will hide elements on screen (browser) width of bigger than 1200px, for example desktops
  • Medium – will hide elements on screen width bigger than 992px and lower than 1199px, for example tablets, small laptops
  • Small – bigger than 768px and lower than 991px, in general small tables
  • Extra small – will hide elements on screen width smaller than 768px, which includes smartphones, phablets or very small tables.

This feature is only available on Kallays version 4.1+ .