Define a Custom 3xl Breakpoint for very wide screens

In my theme.css file I have the following:

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

@theme {
        --breakpoint-3xl: 1920px;  /* your custom width */
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

@theme {
        --breakpoint-3xl: 1920px;  /* your custom width */
}

and in my Form I have the following:

Group::make()->columns(["3xl"=>3,"2xl"=>2,"default"=>1])

Group::make()->columns(["3xl"=>3,"2xl"=>2,"default"=>1])

` In the browser it shows the classes, but it doesn't break into 3 columns, even though the screen is 2450px.

<div class="fi-sc  fi-sc-has-gap fi-grid 3xl:fi-grid-cols 2xl:fi-grid-cols" style="--cols-3xl: repeat(3, minmax(0, 1fr)); --cols-2xl: repeat(2, minmax(0, 1fr)); --cols-default: repeat(1, minmax(0, 1fr));">

<div class="fi-sc  fi-sc-has-gap fi-grid 3xl:fi-grid-cols 2xl:fi-grid-cols" style="--cols-3xl: repeat(3, minmax(0, 1fr)); --cols-2xl: repeat(2, minmax(0, 1fr)); --cols-default: repeat(1, minmax(0, 1fr));">

2 Replies

problemliOP•2mo ago

I am really struggling with this 🙁

Dennis Koch•2mo ago

What's the actual CSS that gets applied?

Gaming

Programming

Define a Custom 3xl Breakpoint for very wide screens

Did you find this page helpful?