I am currently developing an Angular 5 application that requires responsiveness. I am encountering difficulties in making it responsive for different resolutions such as 1366X768 and 1920X1080 where font sizes vary.
Issue 1: I have customized breakpoints in my style.scss as shown below:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl:1900px //this is custom breakpoint; after compiling bootstrap does generates col-xxl-* classes
);
I added xxl as a new breakpoint. However, when I assign the col-xxl-* class to an element, it takes full width just like col-12 does. See the image below :
https://i.sstatic.net/E8ZSo.png
Even though I gave the container with a red border the col-xxl-3 class, it still takes full width. Why aren't the responsive grid classes related to col-*-3 being applied? It should generate CSS like this:
.col-xxl-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
But it doesn't. Am I doing something wrong?
Issue 2
According to the Bootstrap responsive breakpoints, we can use mixins to target different resolutions. In the component-level SCSS, I used these mixins as follows :
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
span.work_catalog {
@include media-breakpoint-up(xl) { //this will target all above 1200 px as per bootstrap documentation; so this works as you see red border in the above image
border:1px solid red;
}
}
However, when I tried to use it like this :
span.work_catalog {
@include media-breakpoint-up(xxl) {
border:1px solid red;
}
}
it still applies for resolutions above 1200px. I expected the CSS to only apply for resolutions above 1900px since I added a custom grid breakpoint in my style.scss. Am I missing something here?