Fix tutorial layout#661
Merged
Merged
Conversation
The full-width cards on the tutorials page were overflowing and overlapping subsequent sections on mobile devices. This occurred because a hardcoded `max-height: 500px` in `_docs.scss` was overriding the intended mobile behavior due to CSS load order. This limits the 500px `max-height` constraint to viewports 768px and wider, allowing the cards to expand naturally on smaller screens.
Fix section spacing and remove obsolete padfix class on tutorials page After resolving the layout overlap issue on mobile, an unnaturally large gap remained between the "Beginner" and "Advanced" tutorial sections. This was cause by two overlapping padding classes on the first section's container: 1. `padfix`: An obsolete CSS hack that forcefully added 80px of bottom padding on mobile. This class and its CSS definitions have been completely removed. 2. `common-padding--bottom-small`: Added a standard 60px/40px bottom padding which was unnecessary since the sections are stacked. Removing both classes from the "Beginner" container allows the sections to flo with normal spacing while keeping their separate HTML containers intact.
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
2 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.
What changed
This PR fixes two layout bugs on the
/docs/tutorialspage:How it works
_docs.scssfile contained a globalmax-height: 500pxfor.card__fullwidth .cardthat loaded after the mobile-specificmax-height: nonestyles in_cards.scss, trapping the content. I updated_docs.scssto only apply the 500px limit on viewports768pxand wider.padfixclass (an old CSS workaround) and thecommon-padding--bottom-smallclass from the first section's container. Removing the padding class removes the artificial 60px gap between the two sections, allowing them to flow with normal spacing while keeping their separate HTML containers intact.