How to change breakpoint values in primevue/primefaces? - css

Question

How can I change the default breakpoint values in primevue/primefaces ?
I mean setting values different than 576px for xs, 768px for md, 992px for lg etc.
A similar question has been asked here 3 years ago but no one answered.

Answer 1

After spending some time trying to come up with a solution, I've decided to go with this approach:
Import this css after you import your Primevue styles. Be sure to use
#media in the order it is provided below.
**
This will override Primevue's breakpoints
**
Lemme know if you found a better approach.
#media screen and (min-width: 0px){
.p-xs-1 {
width: 8.3333%;
}
.p-xs-2 {
width: 16.6667%;
}
.p-xs-3 {
width: 25%;
}
.p-xs-4 {
width: 33.3333%;
}
.p-xs-5 {
width: 41.6667%;
}
.p-xs-6 {
width: 50%;
}
.p-xs-7 {
width: 58.3333%;
}
.p-xs-8 {
width: 66.6667%;
}
.p-xs-9 {
width: 75%;
}
.p-xs-10 {
width: 83.3333%;
}
.p-xs-11 {
width: 91.6667%;
}
.p-xs-12 {
width: 100%;
}
}
#media screen and (min-width: 576px){
.p-sm-1 {
width: 8.3333%;
}
.p-sm-2 {
width: 16.6667%;
}
.p-sm-3 {
width: 25%;
}
.p-sm-4 {
width: 33.3333%;
}
.p-sm-5 {
width: 41.6667%;
}
.p-sm-6 {
width: 50%;
}
.p-sm-7 {
width: 58.3333%;
}
.p-sm-8 {
width: 66.6667%;
}
.p-sm-9 {
width: 75%;
}
.p-sm-10 {
width: 83.3333%;
}
.p-sm-11 {
width: 91.6667%;
}
.p-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 992px){
.p-md-1 {
width: 8.3333%;
}
.p-md-2 {
width: 16.6667%;
}
.p-md-3 {
width: 25%;
}
.p-md-4 {
width: 33.3333%;
}
.p-md-5 {
width: 41.6667%;
}
.p-md-6 {
width: 50%;
}
.p-md-7 {
width: 58.3333%;
}
.p-md-8 {
width: 66.6667%;
}
.p-md-9 {
width: 75%;
}
.p-md-10 {
width: 83.3333%;
}
.p-md-11 {
width: 91.6667%;
}
.p-md-12 {
width: 100%;
}
}
#media screen and (min-width: 1200px){
.p-lg-1 {
width: 8.3333%;
}
.p-lg-2 {
width: 16.6667%;
}
.p-lg-3 {
width: 25%;
}
.p-lg-4 {
width: 33.3333%;
}
.p-lg-5 {
width: 41.6667%;
}
.p-lg-6 {
width: 50%;
}
.p-lg-7 {
width: 58.3333%;
}
.p-lg-8 {
width: 66.6667%;
}
.p-lg-9 {
width: 75%;
}
.p-lg-10 {
width: 83.3333%;
}
.p-lg-11 {
width: 91.6667%;
}
.p-lg-12 {
width: 100%;
}
}
#media screen and (min-width: 1600px){
.p-xl-1 {
width: 8.3333%;
}
.p-xl-2 {
width: 16.6667%;
}
.p-xl-3 {
width: 25%;
}
.p-xl-4 {
width: 33.3333%;
}
.p-xl-5 {
width: 41.6667%;
}
.p-xl-6 {
width: 50%;
}
.p-xl-7 {
width: 58.3333%;
}
.p-xl-8 {
width: 66.6667%;
}
.p-xl-9 {
width: 75%;
}
.p-xl-10 {
width: 83.3333%;
}
.p-xl-11 {
width: 91.6667%;
}
.p-xl-12 {
width: 100%;
}
}
#media screen and (min-width: 2000px){
.p-xxl-1 {
width: 8.3333%;
}
.p-xxl-2 {
width: 16.6667%;
}
.p-xxl-3 {
width: 25%;
}
.p-xxl-4 {
width: 33.3333%;
}
.p-xxl-5 {
width: 41.6667%;
}
.p-xxl-6 {
width: 50%;
}
.p-xxl-7 {
width: 58.3333%;
}
.p-xxl-8 {
width: 66.6667%;
}
.p-xxl-9 {
width: 75%;
}
.p-xxl-10 {
width: 83.3333%;
}
.p-xxl-11 {
width: 91.6667%;
}
.p-xxl-12 {
width: 100%;
}
}