docs: improve mobile responsiveness of landing page#261
Merged
sonukapoor merged 1 commit intoOWASP:mainfrom Apr 30, 2026
Merged
docs: improve mobile responsiveness of landing page#261sonukapoor merged 1 commit intoOWASP:mainfrom
sonukapoor merged 1 commit intoOWASP:mainfrom
Conversation
- Fix uneven `.pillars` wrapping by switching to a CSS grid with explicit columns; stacks to 1 column under 700px. - Scope footer flex layout to a new `.footer-links` class so it no longer inserts gaps between words/links in non-list paragraphs. - Wrap long command/code blocks (`.command-box pre`) and reserve right-padding so the copy button never overlays text. - Switch `#links` (Case Studies and Guides) grid to `auto-fit`, so the 5 cards lay out as 3+2 on desktop and stack cleanly on mobile. - Add `<480px` breakpoint: full-width stacked CTA buttons, smaller hero logo pair, tighter card/code padding. - Equal-width preview tabs on small screens; allow long link text to wrap inside cards.
Collaborator
|
Thank you for your contribution @mamgad |
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.
Summary
.pillarslayout (switched flex-wrap to grid; stacks cleanlyunder 700px)
.footer-linksclass so it no longer.command-box pre) and reserve right-paddingso the copy button never overlays text — fixes the badge markdown card on
mobile
#links(Case Studies and Guides) grid usesauto-fitso the 5 cards layout as 3+2 on desktop and stack on mobile, instead of leaving an orphan card
<480pxbreakpoint: full-width stacked CTA buttons, smaller hero logo,tighter card/code padding
Test plan
docs/index.htmlat viewport widths 320, 375, 414, 700, 980, and1200px and verify no horizontal page scroll, uniform card sizing per row, and
no text under the copy button
multiple lines on mobile and copies the original single-line markdown
words/links) and the bullet-separated row still shows
•separators