layout.css

Same filename in this branch
  1. 10 core/themes/olivero/css/layout/layout.css
  2. 10 core/themes/claro/css/layout/layout.css
  3. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
Same filename in other branches
  1. 7.x themes/stark/layout.css
  2. 7.x themes/bartik/css/layout.css
  3. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  4. 9 core/themes/olivero/css/layout/layout.css
  5. 9 core/themes/seven/css/layout/layout.css
  6. 9 core/themes/claro/css/layout/layout.css
  7. 9 core/themes/bartik/css/layout.css
  8. 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  9. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  10. 8.9.x core/themes/seven/css/layout/layout.css
  11. 8.9.x core/themes/claro/css/layout/layout.css
  12. 8.9.x core/themes/stark/css/layout.css
  13. 8.9.x core/themes/bartik/css/layout.css
  14. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  15. 11.x core/themes/olivero/css/layout/layout.css
  16. 11.x core/themes/claro/css/layout/layout.css
  17. 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css

This file is used to create generic layout styles.

More specific layout items may be found within their respective files, e.g. the layout for two columns is in the layout-2-cols.css file.

File

core/profiles/demo_umami/themes/umami/css/layout/layout.css

View source
  1. /**
  2. * @file
  3. * This file is used to create generic layout styles.
  4. *
  5. * More specific layout items may be found within their respective files, e.g.
  6. * the layout for two columns is in the layout-2-cols.css file.
  7. */
  8. .container {
  9. max-width: min(calc(100vw - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px) - 2rem), 1200px);
  10. margin: auto;
  11. }
  12. /* Add responsive side gutters to the outer layout container 'main' at smaller sizes */
  13. .main {
  14. padding-inline: 4%;
  15. padding-block: 0 2.37rem;
  16. }
  17. /* Extra large + side margins */
  18. @media screen and (min-width: 80rem) {
  19. /* 1200px (large) + 80px (side margins) = 1280px */
  20. .main {
  21. padding-inline: 0;
  22. }
  23. }
  24. .views-view-responsive-grid__item .views-view-responsive-grid__item-inner,
  25. .views-view-responsive-grid__item .views-view-responsive-grid__item-inner .umami-card {
  26. height: 100%;
  27. }

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