Increase @media max-width from 700px to 800px #719
Conversation
This file contains 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
It allows a better readability on small width devices (< 800px, for example, smartphones in landscape mode) by moving the profile bar from the side to the top.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Hello 馃憢
Just a small PR to increase the
max-widthparameter of@mediafrom 700px to 800px, to increase readability mostly on smartphones in landscape mode. It probably solves in a way #591.Current behavior
I've noticed that on devices with small width (but > 700px, like some smartphones in landscape mode), the profile bar stays on the side, taking 30% of the screen.
When the width is <= 700px, then the sidebar is moved to the top.
By moving the profile bar from the side to the top, it allows a better readability on these devices. The issue is that 700px is now probably too low for most of the smartphones; new ones like iPhones, Galaxy, etc. have at least a 800px width.
Update
To change that behavior, I've updated the max-width value from 700px to 800px. Also, instead of having a max width at 600px when
@media(max-width: 800px), I've updated it to 95% of the screen.Values chosen
I've chosen 800px because most of the smartphones in landscape mode have now a width > 700px. But newer models have widths even greater than 800px (for example, 812px for iPhone 11 Pro, and even greater for new iPhones). So actually, the 800px could even be increased to 900px to my opinion.
Also, increasing the max width to 95% is more readable to me; but it's just my preference.