Fix mobile responsiveness #12
Merged
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
This commit updates 'css/landing.css' to fix a layout overflow on mobile devices.
holzensp
approved these changes
Apr 15, 2024
Collaborator
holzensp
left a comment
holzensp
left a comment
There was a problem hiding this comment.
Thanks for the fix and sorry to let it sit.
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.
Description
This pull request aims to fix landing page responsiveness on mobile devices (most notably iPhone Xr and above). It was determined that logos within the Integrated application configuration section and certain divs with the
.hero-duoCSS class were causing a content overflow on sub-768px devices.Changes made
The problem was fixed by adjusting the following properties:
max-widthproperty value in the@mediasection,min-widthproperty value in the.logosCSS class.Testing
Changes have been tested with Chrome DevTools using various devices presets (notably iPhone SE, Xr, 12 Pro, 14 Pro, as well as Galaxy S20 Ultra).
Why is this important
This content overflow pushes the hamburger icon off-screen, as well as introduces inconsistent scrolling behaviour, both of which can potentially confuse the user.
Screenshots of the problem