Responsive Display

Responsive Breakpoints

The default responsive breakpoints for GP are 768px for mobile and 1024px for desktop with tablet in between.

This means that you can target CSS to certain device by using @media:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

IE10+ Specific Styles

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
}

Using our hide-on-* classes

To hide/show certain contents depending on devices, you can use the three handy built-in classes below:
hide-on-mobile
hide-on-tablet
hide-on-desktop

Some example usages:

– To hide certain menu items on mobile, you can add hide-on-mobile to the Custom Classes field.

– To show certain contents in desktop only, try this in the Text Editor:

<div class="hide-on-mobile hide-on-tablet">
    Content here will only display in Desktop
</div>