adding formatting for 200% magnification on standard screen #835
Conversation
AAloshine-scottlogic
requested review from
pmarsh-scottlogic and
dhinrichs-scottlogic
…ting started buttons dont touch at 150%
There was a problem hiding this comment.
This isn't working as you intended, since switching to rems, so I assume you haven't run it locally to check... unless you're still doing so and have realised the issues!
The logic is basically inverted now at normal (100%) zoom, as in, the "render everything smaller and tighter" breakpoint kicks in from 600px width and upwards:
At 599px:
At 600px:
At 1480px (laptop screen):
And at 200% zoom on full laptop screen it still doesn't all fit:
If I rewind to your original code using 150DPI, it doesn't work well on my screen where I have my taskbar vertically:
And of course with DPI we don't get any allowance for (available) screen width nor basefont increases.
I think you'd be wise to start from scratch, and work out a breakpoint (in rem) where things become too tight, on a standard ScottLogic laptop (1920x1200). If need be, you can gracefully respond using a couple of breakpoints, though that might be beyond the scope of this ticket if you can get everything working nicely with a single change. Remember to test it with
- zooming in/out, up to 200%
- changing base font at 100% zoom only, up to 32px
- Resizing the window
|
Ah crumbs, youre right! i've been using the desktop to test the magnification but havent used my laptop since i usually have my code on the laptop screen and the website open on the desktop one. I'll go ahead and try and figure out the correct rem for the laptop screen then |
|
This is looking really good now 💎 Just the minor suggestions I chucked your way on teams, then very happy to approve ✅ |
chriswilty
dismissed
dhinrichs-scottlogic’s stale review
Changes now addressed, and Doro is off this week so cannot re-review
* adding formatting for 200% magnification on standard screen * eslint+format * added some padding to the right header area so the reset progress/getting started buttons dont touch at 150% * converted from dpi to rem and added no wrap to the reset progress button * lint * changed media query to rem, magnification now working on laptop screen * eslint changing from fill avaliable * reverting uneccesary change * added chris' changes
Description
added media break querys to decrease padding and margins so that the app fully displays all functions at 200% magnification.
Screenshots
ticket link:
#699