Topic: Changing grid breakpoints doesnt work properly
Pedrael free asked 6 years ago
Hello. I am trying to change grid breakpoints and container max width by means of creating my own custom.scss file that contain code below (1).
I added @import "custom" at the end of mdb.scss file and compiled it. I have also experimented with adding imports in custom.scss file.
Breakpoints dont change. Adding @import "mdb" at the end of custom.scss file deletes breakpoints not pointed in overrided variables but doesn`t override values that i wrote (2).
I didn`t forget to recompile files, I use gulp, overriding other variables or creating own class works.
https://mdbootstrap.com/docs/jquery/layout/grid-usage/ manual used.
1. Supposed code
$grid-breakpoints: (
sm: 0px,
md: 768px,
lg: 1170px
);
$container-max-widths: (
sm: 445px,
md: 750px,
lg: 1230px
);
2. Code that somehow works
@import "core/bootstrap/functions";
@import "core/bootstrap/variables";
$grid-breakpoints: (
sm: 0px,
md: 768px,
lg: 1170px
);
$container-max-widths: (
sm: 445px,
md: 750px,
lg: 1230px
);
@import "mdb"
Marta Wierzbicka staff answered 6 years ago
Hi,
there is a thing, that these scss breakpoints values are taken from the bootstrap.css file and in MDB we don't overwrite the bootstrap grid. For now, we don't have a better solution than this your one above. We will try to work on it.
Best,
Marta
ellybryant free commented 2 years ago
Hello, did you implement better solution?
Mateusz Lazaru staff commented 2 years ago
// Your custom variables
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px,
) !default;
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px,
) !default;
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, '$container-max-widths');
Copy code from above to this file: src\mdb\scss\custom\_variables.scss
Manually set all the values and recompile using our webpack starter.
ellybryant free commented 2 years ago
Hi, can you tell me if this is going to work with your MDB5 React UI KIT all the steps for the webpack starter? I am using your react pack because when I try to run getMDBsrc it throws error > mdb-webpack-starter@3.0.0 getMDBsrc
node getMDBsrc
Failed to copy MDB UI KIT source code!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: PC
- Browser: Mozilla Firefox, Google Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No