Updating the Responsiveness

Bootstrap 4 explicit media queries replaced the Bootstrap 2 respond-to mixins for CSS responsiveness. Follow these steps to update your theme’s responsiveness:

  1. Open your _custom.scss file.

  2. Replace all respond-to mixins with corresponding media queries shown below. Note that some of the dimensions are slightly different:

    Media Query Replacements

    Liferay Portal 6.2 Mixin Liferay DXP 7.1 Media Query
    @include respond-to(phone) (max-width: 767px)@include media-breakpoint-down(sm) (max-width: 767px)
    @include respond-to(tablet) (min-width: 768px, max-width: 979px)@include media-breakpoint-only(md) (min-width: 768px, max-width: 991px)
    @include respond-to(phone, tablet) (max-width: 979px)@include media-breakpoint-down(md) (max-width: 991px)
    @include respond-to(desktop, tablet) (min-width: 768px)@include media-breakpoint-up(md) (min-width: 768px)
    @include respond-to(desktop) (min-width: 980px)@include media-breakpoint-up(lg) (min-width: 992px)

For example, here is a comparison between the Lunar Resort theme’s original and updated syntax:

Original:

@include respond-to(phone, tablet) {
    html #wrapper #banner #navigation {
    ...
    }
    ...
}

Updated:

@include media-breakpoint-down(md) {
    html #wrapper #banner #navigation {
    ...
    }
    ...
}

Updating 6.2 Theme Templates

Updating CSS File Names for Clay and Sass

« Updating 6.2 CSS Rules and ImportsUpdating 6.2 Theme Templates »
Was this article helpful?
0 out of 0 found this helpful