GeneratePress Breakpoints

GeneratePress Breakpoints

@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 */
}

================================================================================

Hide-on classes for responsive display:

hide-on-mobile
hide-on-tablet
hide-on-desktop

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

================================================================================

@media (min-width: 1025px) {
  /* CSS in here for desktop only */
}

/* TABLET LANDSCAPE VERSION */
        @media only screen and (min-width: 768px) and (orientation : landscape) {
           /* CSS in here */
        }
/* TABLET PORTRAIT VERSION */
        @media only screen and (min-width: 768px) and (orientation : portrait) {
            /* CSS in here */
        }

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


/* PHONE LANDSCAPE VERSION */
        @media only screen and (min-width: 320px) and (orientation : landscape) {
           /* CSS in here */
        }

/* PHONE PORTRAIT VERSION */
        @media only screen and (min-width: 320px) and (orientation : portrait) {
           /* CSS in here */
        }

@media (max-width: 767px) {
  /* CSS in here for mobile only */
}