Problems when setting customBreakpoints

[Viraj24Gupta]

Hi there,
I have used customBreakpoints using the CustomizationProvider and am facing 2 problems as of now.

1. When i try to use SidePanel it covers the whole page width instead of just keeping the width fixed as it does normally.
2. When i pass this display={['none', 'flex', 'flex']} to a box component it doesn't work and just uses the first value at every breakpoint.

[nkrantz]

Hey @Viraj24Gupta - could you share a reproduction or link to your code so I can take a look?

The Side Panel component is set to take up the full width of the page at our smallest breakpoint, so that's likely why you're seeing that behavior. I'll take a look at your code but if you're trying to keep a fixed width at your smallest breakpoint, you'll probably just have to target that component directly within the Customization Provider.

[Viraj24Gupta]

hey sorry for the confusion,
what i meant was even if I am on a bigger breakpoint, say 1024px the side panel is coming out from the right and covering the whole space of the body.

also the arrays that we can use to set values for different styling properties for any component does not work at all.

below is the code snippet I have used to set the custom breakpoints in my app,

<CustomizationProvider baseTheme="default" customBreakpoints={["450", "768", "1024"]}>
    <Box display={["none", "flex", "flex"]}> // refering it as box1 below
           some code
     </Box>
</CustomizationProvider>

box1 is not working as it is supposed to i.e., for width less than 450px it should not be displayed and above that it should be,
but it is not gettinh displayed at any width.

[krisantrobus]

Hey @Viraj24Gupta I took a look into this and managed to get it working in this CodeSandbox. You are missing the "px" in the breakpoints array. Let me know if this resolves your issue.

<CustomizationProvider baseTheme="default" customBreakpoints={["450px", "768px", "1024px"]}>
    <Box display={["none", "flex", "flex"]}> // refering it as box1 below
           some code
     </Box>
</CustomizationProvider>

[roxanagomez]

Hi @Viraj24Gupta let us know if the solution above solved your issue or if you need further help.

[Viraj24Gupta]

hey, yea this resolved my issue