Add some media queries to improve UI on mobile (#3991) #4656
Conversation
|
@TitanNano Thanks for looking at this! Could you include some screenshots of the areas that are changed? I think that would make it easier for us to proceed here. |
| @media only screen and (max-width: 480px) { | ||
| .mx_AuthBody { | ||
| width: auto; | ||
| max-width: 500px; | ||
| padding: 10px; | ||
| } | ||
| } |
| @media only screen and (max-width: 480px) { | ||
| .mx_AuthHeader { | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
Before:
After:
With .mx_AuthBody:
| @media only screen and (max-width: 480px) { | ||
| .mx_AuthHeaderLogo { | ||
| display: none; | ||
| } | ||
| } |
|
|
||
| @media only screen and (max-width: 480px) { | ||
| .mx_AuthPage_modal { | ||
| margin-top: 0; | ||
| } | ||
| } |
| @media only screen and (max-width: 480px) { | ||
| .mx_EventTile_line, .mx_EventTile_reply { | ||
| padding-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| .mx_EventTile_content { | ||
| margin-top: 10px; | ||
| margin-right: 0; | ||
| } | ||
| } |
| @media only screen and (max-width: 480px) { | ||
| .mx_RoomHeader_wrapper { | ||
| padding: 0; | ||
| } | ||
| .mx_RoomHeader { | ||
| overflow: hidden; | ||
| } | ||
| } |
|
@jryans I added screenshots to each change. |
jryans
left a comment
jryans
left a comment
There was a problem hiding this comment.
Thanks so much for the line by line screenshots, that makes it a whole lot easier to review. 😄
I spotted one small thing to change, and then I think this ready to merge. Please re-request a review from me when done.
@jryans did you mark what needs to be changed? I'm failing to find it. 😄 |
|
@TitanNano Sorry, I guess GH ate my comment or I forgot to save it... 😖 Anyway, hopefully it's clear now! |
Signed-off-by: Jovan Gerodetti <jovan.gerodetti@titannano.de>
jryans
left a comment
jryans
left a comment
There was a problem hiding this comment.
Great, thanks for working on this! 😄
4 participants
I fixed the requested changes from #3991.