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:
Open _custom.scss
.
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.