-2

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

libraries.yml

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

breakpoints.yml

mymodule.small:
  label: small
  mediaQuery: 'all and (min-width: 740px) and (min-device-width: 740px)'
  weight: 0
  multipliers:
    - 1x
mymodule.medium:
  label: medium
  mediaQuery: 'all and (min-width: 1300px)'
  weight: 1
  multipliers:
    - 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 at 10:45
  • The problem is that i want to apply 'background : red ' for just the specific width 'small and medium' – love coding Jul 22 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 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 at 10:31
0

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.

Example:

// 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) { ... }
| improve this answer | |
  • E.g. responsive images module can use MYTHEME.breakpoints.yml – Hudri Jul 23 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.