Updating the Responsiveness

Updating 6.2 CSS Code

Step 2 of 2

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

  1. Open _custom.scss.

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

    Media Query Replacements

    Liferay Portal 6.2 Mixin the new DXP version 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)

    The Lunar Resort theme’s original and updated syntax is shown below:

    Original:

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

    Updated:

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

The CSS code is updated! Next you’ll update the theme’s templates.