Add responsive breakpoints #18 #52
Merged
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
To better make use of screen real estate on larger resolutions.
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.
First attempt to solve #18. With this change you should have a considerably larger usable area on modern wide screens.
A bit of background:
Bootstrap is a "responsive" CSS framework, which means the width of the layout containers depends on the screen resolution. Bootstraps defines a couple of "breakpoints", pixel-widths of the browser's visible viewport. At those breakpoints, widths and other CSS attributes may change. You can easily see this, when making your browser window narrower. Things stay the same for while, but if you reach a certain window width, something changes.
We use Bootstrap 4, which defined 1200px as the largest breakpoint. So if your browser window reaches a width of 1200px, the layout containers have their maximum width. With modern screens usually offering a (virtual) pixel width of 1920, this leaves a lot of screen space unused.
Thus, Bootstrap 5 introduces another breakpoint at 1400px. I copied this, but also introduced yet another, even larger breakpoint at 1900px.
I think this works really well. Please have a look.
There is also an alternative: Instead of fixed-width containers that depend on breakpoints, Bootstrap also offers "fluid" containers that always use the maximum width available. Let me know, in case I should give this a try as well.