diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-06-09 12:45:40 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-06-09 12:50:18 +0200 |
| commit | b9f3024987404e3617afcb0c0ff29e0944fa945b (patch) | |
| tree | 47924a9f341eae88b6bd53f70969b245234cc913 /src | |
| parent | cfdddac43f10d06a8b0e9bcf69dc0ce77ce16649 (diff) | |
fix(media-queries): use pixel based media queries
Everything was working fine with Firefox but it seems Chromium still
has issues with `em` unit in media queries. The toolbar modals (search,
settings and also main nav) was not displaying correctly on small
devices. Some styles was missing. By switching to pixels based media
queries, the bug seems fixed.
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.module.scss | 5 | ||||
| -rw-r--r-- | src/styles/abstracts/_variables.scss | 10 |
2 files changed, 9 insertions, 6 deletions
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss index 85eeee5..39cd6fe 100644 --- a/src/components/organisms/toolbar/toolbar.module.scss +++ b/src/components/organisms/toolbar/toolbar.module.scss @@ -50,7 +50,10 @@ @media screen and (min-width: #{var.get-breakpoint("sm")}) { .modal { - min-width: fun.convert-px(380); + &--search, + &--settings { + min-width: fun.convert-px(380); + } } } } diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 9620fa0..fc28e7b 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -38,11 +38,11 @@ $ratios: ( /// @prop {String} keys - Keys are identifiers mapped to a given length /// @prop {Map} values - Values are actual breakpoints expressed in pixels $breakpoints: ( - "2xs": fun.convert-px(500, "em"), - "xs": fun.convert-px(600, "em"), - "sm": fun.convert-px(800, "em"), - "md": fun.convert-px(1280, "em"), - "lg": fun.convert-px(1600, "em"), + "2xs": 500px, + "xs": 600px, + "sm": 800px, + "md": 1280px, + "lg": 1600px, ); // I cannot declare the following function with others functions due to module |