Changing grid breakpoints doesnt work properly

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 

$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 Wierzbicka staff answered 4 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 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.

Please insert min. 15 characters.

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

Pedrael

7Support score
1Questions 0Answers 0Snippets