Changing grid breakpoints doesnt work properly

Topic: Changing grid breakpoints doesnt work properly

Pedrael 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"

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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 commented 2 years ago

Hello, did you implement better solution?

mlazaru 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 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!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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

About author

Pedrael

7Support score
1Questions 0Answers

0Snippets likes 0Snippets