Topic: Changing grid breakpoints doesnt work properly
Pedrael free asked 4 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
2. Code that somehow works
Marta Wierzbicka staff answered 4 years ago
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.
ellybryant free commented 10 months ago
Hello, did you implement better solution?
mlazaru staff commented 10 months 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 9 months 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 > email@example.com getMDBsrc
Failed to copy MDB UI KIT source code!
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: 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