How to define breakpoints

[Jason]

I'd like to define my own breakpoints to match Bootstrap. It seems no matter how I define it, it does not work:

private List<MediaBreakpoint> BreakPoints { get; set; } = new();

BreakPoints.Add(new MediaBreakpoint() { Breakpoint = "Small", MediaQuery = "576px" });

[Navin Vinayagam]

Hi Jason,

Thanks for reaching out to us.

We understand that you are attempting to establish custom media breakpoints to align with Bootstrap’s breakpoints in your Blazor application.

From your shared code, we can find that you are defining a list of custom MediaBreakPoint for the SfMediaQuery component. The MediaQuery property configured is directly matched with the browser’s window size. Here is an example of the appropriate syntax for defining your MediaQuery list:

mediaQuery = new List<MediaBreakpoint>()

        {

            new MediaBreakpoint() { Breakpoint = "Max400", MediaQuery = "(max-width: 400px)" },

            new MediaBreakpoint() { Breakpoint = "Min1200", MediaQuery = "(min-width: 1200px)" },

            new MediaBreakpoint() { Breakpoint = "Min900", MediaQuery = "(min-width: 900px)" }        

};

  

Let us know if you need further assistance; we would be happy to assist you.

Regards,

Navin V

Attachment: SyncfusionBlazorMediaQuery_58d102a7.zip