Skip to main content
Drupal Answers

Return to Answer

improved formatting
Source Link
avpaderno ♦
avpaderno ♦
  • 97.9k
  • 15
  • 164
  • 284

HereThis is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: "all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: "all and (max-width: 755px)" }

mytheme.libraries.yml

Edit: added quotation marks to media declaration, it prevents parsing error in some environments.

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: "all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: "all and (max-width: 755px)" }

Here is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: "all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: "all and (max-width: 755px)" }

Edit: added quotation marks to media declaration, it prevents parsing error in some environments.

This is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: "all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: "all and (max-width: 755px)" }
Wrapped media declarations inside quotation marks, it prevents parsing error in some environments.
Source Link
edit approved Jul 23, 2023 at 11:11
Ricardo Castañeda
edit approved Jul 23, 2023 at 11:11
Ricardo Castañeda
  • 421
  • 1
  • 5
  • 12

Here is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: all"all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: all"all and (max-width: 755px)" }

Edit: added quotation marks to media declaration, it prevents parsing error in some environments.

Here is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: all and (min-width: 756px) }
      css/some/path/mobile.min.css: { media: all and (max-width: 755px) }

Here is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: "all and (min-width: 756px)" }
      css/some/path/mobile.min.css: { media: "all and (max-width: 755px)" }

Edit: added quotation marks to media declaration, it prevents parsing error in some environments.

Source Link
usernameabc
usernameabc
  • 2.8k
  • 5
  • 48
  • 98

Here is the solution I found.

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: all and (min-width: 756px) }
      css/some/path/mobile.min.css: { media: all and (max-width: 755px) }