i am new in Drupal , in my case i have added a css code to implement it for just a specific width but in return i see it displayed for all screen size not the small or medium size it appears in all website's size, i wonder where is the problem here ? See the code below


  version: VERSION
    js/popper.min.js: {}
    js/bootstrap.min.js: {}
    js/global.js: {}
      css/style.css: {}
      css/small.css: {breakpoint: small}
      css/medium.css: {breakpoint: medium}
    - core/jquery
    - core/drupal


  label: small
  mediaQuery: 'all and (min-width: 740px) and (min-device-width: 740px)'
  weight: 0
    - 1x
  label: medium
  mediaQuery: 'all and (min-width: 1300px)'
  weight: 1
    - 1x

css code :

body {
  background: red !important;
  • What's the problem here? The breakpoint option simply does not exist at all. See drupal.org/docs/theming-drupal/…
    – Hudri
    Jul 22 '20 at 10:45
  • The problem is that i want to apply 'background : red ' for just the specific width 'small and medium'
    – coding mv
    Jul 22 '20 at 10:51
  • Then write a proper media query in your CSS file. It is the same mediaQuery syntax as used by responsive images / breakpoints.yml . See developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
    – Hudri
    Jul 22 '20 at 11:00
  • Where did you come up with this syntax: css/small.css: {breakpoint: small}? If this is real, at a minimum you would need to use breakpoint: mymodule.small, but I've never heard of this before.
    – sonfd
    Jul 25 '20 at 10:31

I have never herd of "breakpoints.yml" and don't think you can do what you want like that

so i think you just need to make normal media queries in your css file "css/style.css" if you want you can break them out in to other files but really there is no need.


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
  • E.g. responsive images module can use MYTHEME.breakpoints.yml
    – Hudri
    Jul 23 '20 at 7:03

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.