I am working on an angular 5 application which needs to be a responsive app.
I am facing problem to make it reponsive in 1366X768
and 1920X1080
resolutions where in font sizes are different.
Problem 1: I have overidden breakpoints in my style.scss as follow :
$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 have added xxl
as new breakpoint. Now when I add col-xxl-*
class to any of my element, that element takes full width jusy like what col-12
does.
Refer image below :
For container having border red,I have given col-xxl-3
class; however it still having full width. Why its resonsive grid classes related to col-*-3
not getting applied.
I think it should generate css like below:
.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 ?
Problem 2
From this bootstrap responsive breakpoints , we can use mixins for targeting different resolutions. So in component level scss I have used these mixins as below :
@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 u see red border in above image
border:1px solid red;
}
}
but when I used it like below :
span.work_catalog {
@include media-breakpoint-up(xxl) {
border:1px solid red;
}
}
this still gets applied for resolution more than 1200px; What I assume that above css should only gets applied for above 1900px as I have added custom grid breakpoint in my style.scss. Am I missing something here?
You can add a new
xxl
breakpoint like this. Make sure you @import bootstrap after setting the customgrid-breakpoints
...Demo: https://www.codeply.com/go/jus43PxWAU
Then the appropriate
xxl-*
classes will be generated...For the custom mixin classes, define those after you @import bootstrap...
Demo: https://www.codeply.com/go/jus43PxWAU (notice the demo sets the xxl breakpoint as 1366px) so when the screen is wider than xxl,
.work_catalog
has the expected red border.