media-queries.pcss.css

Same filename in this branch
  1. 11.x core/modules/navigation/css/base/media-queries.pcss.css
Same filename in other branches
  1. 10 core/themes/olivero/css/base/media-queries.pcss.css
  2. 10 core/modules/navigation/css/base/media-queries.pcss.css
/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

@custom-media --sm (min-width: 500px);
@custom-media --md (min-width: 700px);
@custom-media --lg (min-width: 1000px);
@custom-media --xl (min-width: 1300px);

/* Navigation related breakpoints */
@custom-media --nav-md (min-width: 500px);
@custom-media --nav (min-width: 1200px);
@custom-media --max-nav (max-width: 1200px);

/* Grid related breakpoints */
@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */
@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */

File

core/themes/olivero/css/base/media-queries.pcss.css

View source 
  1. /*

  2.  * Media query breakpoints.

  3.  * Processed by postcss/postcss-custom-media.

  4.  */

  5. 

  6. @custom-media --sm (min-width: 500px);

  7. @custom-media --md (min-width: 700px);

  8. @custom-media --lg (min-width: 1000px);

  9. @custom-media --xl (min-width: 1300px);

  10. 

  11. /* Navigation related breakpoints */

  12. @custom-media --nav-md (min-width: 500px);

  13. @custom-media --nav (min-width: 1200px);

  14. @custom-media --max-nav (max-width: 1200px);

  15. 

  16. /* Grid related breakpoints */

  17. @custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */

  18. @custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.