Skip to content

Fix horizontal scrolling caused by scaling on the subscribe CTA h2#765

Merged
JohnONolan merged 1 commit into
mainfrom
fix-subscribe-cta-horizontal-scroll
Mar 12, 2021
Merged

Fix horizontal scrolling caused by scaling on the subscribe CTA h2#765
JohnONolan merged 1 commit into
mainfrom
fix-subscribe-cta-horizontal-scroll

Conversation

@PaulAdamDavis

Copy link
Copy Markdown
Member

transform: scale(1.15); on the subscribe CTA h2 caused horizontal scrolling on smaller screens, as illustrated by the red outlines in the before screenshot.

This PR removes that transform in favour if increasing the font-size by 15%, matching the same visual size that the transform produced.

Before:

Screenshot 2021-03-11 at 17 01 37

After:

Screenshot 2021-03-11 at 17 08 17

@PaulAdamDavis PaulAdamDavis force-pushed the fix-subscribe-cta-horizontal-scroll branch from 2d177a8 to 256b321 Compare March 11, 2021 17:33
@JohnONolan

Copy link
Copy Markdown
Member

Agree with approach, but if we're going to manually specify font sizes then lets just specify absolute values in rem rather than calc * 1.15 - makes it a bit more readable

@PaulAdamDavis

Copy link
Copy Markdown
Member Author

Absolute valued was my first approach, but I thought this would make find/replace easier. Agreed though, will change.

@PaulAdamDavis PaulAdamDavis force-pushed the fix-subscribe-cta-horizontal-scroll branch from 256b321 to 81e4a3f Compare March 11, 2021 19:20
@JohnONolan

Copy link
Copy Markdown
Member

@PaulAdamDavis Media query style now specifies EM rather than REM, is that intentional or typo?

@PaulAdamDavis PaulAdamDavis force-pushed the fix-subscribe-cta-horizontal-scroll branch from 81e4a3f to 65b085e Compare March 12, 2021 14:32
@PaulAdamDavis

Copy link
Copy Markdown
Member Author

@JohnONolan Typo, thanks for spotting! Fixed.

@JohnONolan JohnONolan merged commit 48d0619 into main Mar 12, 2021
@JohnONolan JohnONolan deleted the fix-subscribe-cta-horizontal-scroll branch March 12, 2021 14:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants