Fix horizontal scrolling on pages including Streamfield ImageText block #12444
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
ramram-mf
changed the title
robdivincenzo
requested changes
Jun 6, 2024
There was a problem hiding this comment.
Great job @ramram-mf, the new rule addresses the issue and the horizontal scroll is no more! I left one small comment on adjusting the implementation. Please reach out if you have any questions!
…difying medium and large screens current margins.
…-on' of github-mf:MozillaFoundation/foundation.mozilla.org into TP1-168-strange-horizontal-panning-on-opportunity-pages-on
ramram-mf
added
run visual regression tests
and removed
run visual regression tests
labels
ramram-mf
added
run visual regression tests
and removed
run visual regression tests
labels
robdivincenzo
approved these changes
Jun 13, 2024
|
➤ Simon Acosta Torres commented: PR has been merged. |
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.
Description
The
Image Textblock, specifically the.image_text-block .streamfield-content .tw-rowelements, when rendered on mobile viewports, calculates differently horizontal margins adhering to tailwind unit scales, having16pxto each side, providing the following box model:This PR attempts to mitigate the resulting user experience behavior in mobile devices, which introduces horizontal body wide scrolling. This horizontal scrolling gets in the way of vertical scrolling and immediately disrupts user experience in affected pages.
The solution proposed uses a
calc()css function to remove the resulting extra1pxfrom the right of the elements so it doesn't overflow from body.Fix will only be applied to small viewports.
Link to sample test page: https://foundation-s-tp1-168-st-l8zo7d.herokuapp.com/en/initiatives/web-literacy/core-curriculum/participate/
Related PRs/issues: #10801
┆Issue is synchronized with this Jira Story