CODEWITHSUNDEEP
drupalthemesbootstrap-5
Lissy
Lissy

Reputation: 71

Wrong order of css in Bootstrap Subtheme

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?

Upvotes: 1

Views: 16

Answers (0)

Related Questions