I work on many installations with a package of Bootstrap (Barrio) and a custom subtheme + paragraph + layout paragraph. In the subtheme, I have the following settings for breakpoints.
info.yml:
libraries:
- custom_barrio/bootstrap
- custom_barrio/global-styling
- custom_barrio/small-device-styling
- custom_barrio/medium-device-styling
- custom_barrio/large-device-styling
- custom_barrio/extra-large-device-styling
- custom_barrio/wide-device-styling
libraries.yml
global-styling:
version: VERSION
js:
js/global.js: {}
css:
component:
css/style.css: {}
css/colors.css: {}
css/edit.css: {}
css/add.css: {}
small-device-styling:
css:
theme:
css/smalldevice.css: {media: all and (min-width: 576px)}
medium-device-styling:
css:
theme:
css/mediumdevice.css: {media: all and (min-width: 768px) }
large-device-styling:
css:
theme:
css/largedevice.css: {media: all and (min-width: 992px)}
extra-large-device-styling:
css:
theme:
css/extralargedevice.css: {media: all and (min-width: 1200px)}
wide-device-styling:
css:
theme:
css/widedevice.css: {media: all and (min-width: 1600px)}
.....
breakpoint.yml
custom_barrio.global-styling:
label: global-styling
mediaQuery: ''
weight: 0
multipliers:
- 1x
custom_barrio.small-device-styling:
label: small-device-styling
mediaQuery: 'all and (min-width: 576px) '
weight: 1
multipliers:
- 1x
custom_barrio.medium-device-styling:
label: medium-device-styling
mediaQuery: 'all and (min-width: 768px)'
weight: 2
multipliers:
- 1x
custom_barrio.large-device-styling:
label: large-device-styling
mediaQuery: 'all and (min-width: 992px)'
weight: 3
multipliers:
- 1x
custom_barrio.extra-large-device-styling:
label: extra-large-device-styling
mediaQuery: 'all and (min-width: 1200px)'
weight: 4
multipliers:
- 1x
custom_barrio.wide-device-styling:
label: wide-device-styling
mediaQuery: 'all and (min-width: 1600px)'
weight: 5
multipliers:
- 1x
The order of css in ONE of the installation is wrong:
<link rel="stylesheet" media="all and (min-width: 1200px)" href="/themes/custom/custom\_barrio/css/extralargedevice.css?sroev9" />
<link rel="stylesheet" media="all and (min-width: 992px)" href="/themes/custom/custom\_barrio/css/largedevice.css?sroev9" />
<link rel="stylesheet" media="all and (min-width: 768px)" href="/themes/custom/custom\_barrio/css/mediumdevice.css?sroev9" />
<link rel="stylesheet" media="all and (min-width: 576px)" href="/themes/custom/custom\_barrio/css/smalldevice.css?sroev9" />
<link rel="stylesheet" media="all and (min-width: 1600px)" href="/themes/custom/custom\_barrio/css/widedevice.css?sroev9" />
The difference: the installation where it works is running Drupal 10.4.1 and Barrio 5.5.19. The others are running, for example, Drupal 10.2.0 and Barrio 5.5.16.
I'm probably missing something? Can you see an error?