0

We have the following mytheme.breakpoints.yml file and a simple library mylibrary that is added through our mytheme. Within the mylibrary there are two libraries, one that is optimized for desktop small and another for mobile breakpoints.

How would I add the mobile css file only for when the browser's breakpoint is less than 756px, but load desktop small breakpoint when browser's breakpoint is greater than 756px?

mytheme.breakpoints.yml

mytheme.mobile
  label: mobile
  mediaQuery: 'all and (max-width: 756px)'
  weight: 1
  multipliers:
    - 1x
mytheme.desktopSmall
  label: desktop small
  mediaQuery: 'all and (min-width: 756px)'
  weight: 1
  multipliers:
    - 1x

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { /* load only for min width > 756px*/ }
      css/some/path/mobile.min.css: { /* load only for max width < 756px*/ }

Adding Use Theme Breakpoints as Media Queries for Theme CSS Libraries for reference.

  • Screen size detection occurs at the browser level after loading the assets. The best approach is to add the different rules in CSS media queries – Ismail Cherri Sep 8 '18 at 2:04
  • @IsmailCherri Yes, we do follow that approach where we use media queries. However, using that approach we found that the aggregated CSS files included all the media queries even when they were not needed. – usernameabc Sep 10 '18 at 16:03
  • Please refer to this drupal.org/docs/8/theming/… – Ismail Cherri Sep 10 '18 at 16:11
0

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) }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.