-
Notifications
You must be signed in to change notification settings - Fork 153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Showed speech bubble and 'filter' on mobile #2194
Conversation
…mozilla/foundation.mozilla.org into issue-2141-speech-bubble-mobile
display: initial; | ||
@media (min-width: $bp-md) { | ||
top: calc(#{$filter-bubble-dimension} / 2 + 2px); | ||
right: calc(2 * #{$filter-bubble-dimension} - 1.5em); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using interpolation #{}
makes sure calc()
works for mixed units calculations.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! It looks great Mavis.
@@ -45,7 +41,7 @@ | |||
justify-content: center; | |||
background: white; | |||
|
|||
@media screen and (min-width: 550px) { | |||
@media (min-width: $bp-md) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm changing these to $bp-md
so responsive design breakpoints can be consistent with mockups
Closes #2141
Extra
I had to do the following adjustments to make sure things don't get cropped on mobile.