CODEWITHSUNDEEP
csssassmedia
mdmb
mdmb

Reputation: 5283

Overriding CSS media queries

I have a library that I'm using that applies col-xxl-* (where * is a number) style whenever the screen reaches 1600px, that is @media (min-width: 1600px).

Is there a way (without forking the library), to change this thing, so the col-xxl-* is applied from e.g. 2000px?

Maybe helpful - this library is using .less with variables

Upvotes: 0

Views: 374

Answers (2)

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

You have mentioned less with variables. Your media query is getting applied at 1600, which means there must be a configuration where variables are defined for 

"xxl" : 1600px

You need to modify those variables and include it in less/scss file before the library path is included. Check below code:

Variables.scss

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px,
  xxl: 2000px
);

app.scss:

@import "variables";
@import "{{librarypath}}";

Upvotes: 4

RRRGGG
RRRGGG

Reputation: 114

Might be this is work for you Just you have to overwrite in this media query using !important keyword this is not rightway but you are using libarary in that we could not overwrite and if we overwrite in our .less then it would not work so there is only way to use !important keyword in your media query @media (min-width: 2000px)

Upvotes: 0

Related Questions