Drupal Answers Asked by coding mv on November 23, 2021
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;
}
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) { ... }
Answered by taggartJ on November 23, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP