Change sm screen to 640px #759
Merged
+8
−8
Conversation
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
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.
Previously we switched the
smbreakpoint from 576px (borrowed from Bootstrap) to 568px (to match the landscape viewport of an iPhone SE.)The iPhone SE is no longer manufactured and no other smartphone maker makes a phone with a viewport size that low, so I think it makes more sense to use a larger size for
smthan it does to try and optimize for a screen size that will eventually no longer really be used.By changing the
smbreakpoint from 568 to 640, you only have to worry about making your design work in the 640-768 range instead of the 568-768 range. This is really helpful if you have some sort of side-by-side layout that would work great at say 620px, but looks bad below that size.Using 568px as the
smbreakpoint, you would be forced to compromise on the design and serve a more stacked layout to devices all the way up to 768px, just because your original layout broke down right at the bottom end of the range.At first it might sound wasteful to have to use the same layout for any viewport in the 0-640px range for similar reasons, but in practice the next viewport size you are likely to encounter under 640px is 480px, and the iPhone SE in portrait mode is 320px, so you're only really designing for the 320px-480px range in practice.
640px was chosen because it was the second smallest landscape viewport size I could find in this article (it's the size of the Galaxy S7). It also happens to be 128px away from 768px, which is exactly half the 256px gap between 768 and 1024, so that's at least a little satisfying :)