1

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.

Improve this question
3
  • 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
    Commented Sep 8, 2018 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
    Commented Sep 10, 2018 at 16:03
  • Please refer to this drupal.org/docs/8/theming/…
    – Ismail Cherri
    Commented Sep 10, 2018 at 16:11

1 Answer 1

Reset to default
0

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)" }
Improve this answer
1
  • Did I miss anything? I have create a global-styling: css and there I have added css/style-tab.css: { media: all and (min-width: 768px) and (max-width: 1024px)} css/style-mob.css: { media: all and (max-width: 767px)} But still able to see both the files getting loaded at both the resolution
    – Anamika
    Commented Apr 16, 2021 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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