Hi people,

I am editing a website in odoo 16 and I have issue with mediaquerys.

Odoo by js add dinamicaly css when  the size of the screen changes. That means that if I add css style on a custom module is not gonna override the dynamic css ( I did it).

I searched the js function that is responsible for add the mediaquerys and i found it in the backend assets: 

const MEDIAS_BREAKPOINTS=__exports.MEDIAS_BREAKPOINTS=[{maxWidth:474},{minWidth:475,maxWidth:575},{minWidth:576,maxWidth:767},{minWidth:768,maxWidth:991},{minWidth:992,maxWidth:1199},{minWidth:1200,maxWidth:1533},{minWidth:1534},];__exports.getMediaQueryLists=getMediaQueryLists;function getMediaQueryLists(){return MEDIAS_BREAKPOINTS.map(({minWidth,maxWidth})=>{if(!maxWidth){return window.matchMedia(`(min-width: ${minWidth}px)`);}
if(!minWidth){return window.matchMedia(`(max-width: ${maxWidth}px)`);}
return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`);});}

Odoo have a variable called MEDIAS_BREAKPOINTS with all the sizes and getMediaQueryLists function that create the mediaquerys.

I want to remove the transition of  {minWidth:768,maxWidth:991} size because I dont like it. 

To do that I tried to override the MEDIA_BREAKPOINTS variable and the getMediaQueryLists function but Is not working fine, does anybody know how to achieve my goal? Every help is very welcome. Here is my code:

odoo.define('visitante_mailing', function(require){
	​"use strict";
	​var config=require('web.config');
	​config.MEDIAS_BREAKPOINTS=[
	​	​{maxWidth:474},
	​	​{minWidth:475, maxWidth:575},
	​	​{minWidth:576, maxWidth:991},
	​	​{minWidth:992, maxWidth:1199},
	​	​{minWidth:1200, maxWidth:1533},
	​	​{minWidth:1534},
	​];
	​config.getMediaQueryLists = function(){
	​	​return config.MEDIAS_BREAKPOINTS.map(({minWidth,maxWidth})=>{
	​	​	​if(!maxWidth){
	​	​	​	​return window.matchMedia(`(min-width: ${minWidth}px`);
	​	​	​if(!minWidth){
	​	​	​	​​return window.matchMedia(`(max-width: ${maxWidth}px`);
	​	​	​}
	​	​	​​return window.matchMedia(`(min-width: ${minWidth}px and (max-width: ${maxWidth}px)`);
	​	​}).filter((mediaQuery) => mediaQuery !== undefined
	​};
});