Fix expanded menu when screen width is <1000px for Twenty Twenty theme#3790
Merged
westonruter merged 2 commits intodevelopfrom Nov 19, 2019
Merged
Fix expanded menu when screen width is <1000px for Twenty Twenty theme#3790westonruter merged 2 commits intodevelopfrom
westonruter merged 2 commits intodevelopfrom
Conversation
westonruter
approved these changes
Nov 19, 2019
Member
westonruter
left a comment
There was a problem hiding this comment.
This is fixing the issue for me.
schlessera
previously requested changes
Nov 19, 2019
|
|
||
| @media (max-width: 999px) { | ||
| .show-modal { | ||
| display: unset !important; |
Collaborator
There was a problem hiding this comment.
I'd like to avoid the use of !important if at all possible.
Can you try with the following, more specific selector: amp-lightbox.cover-modal.show-modal ? I think that should fix the problem as well without using !important.
Contributor
Author
There was a problem hiding this comment.
Sure that works and would prevent future CSS rule conflicts.
Use of !important has been removed
westonruter
pushed a commit
that referenced
this pull request
Nov 19, 2019
#3790) * Fix amp-lightbox when screen width is <1000px for Twenty Twenty theme * Use a more specific selector rather than using `!important` to apply the rule
|
Verified in QA |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
With the Twenty Twenty theme, when the expanded menu is active on a screen width <1000px, it is incorrectly shown:
Before
The root cause of this is due to the container that the menu is placed in by
amp-lightboxupon initialization is not made to fill the content because theamp-lightboxhas thescrollableattribute.This PR fixes this issue by unsetting the
displayCSS property of theamp-lightbox, reverting it fromflextoblock.After
Checklist